تاثیر برداری در CSS: کنترل دقیق رندرینگ گرافیک‌های SVG با vector-effect

ویژگی vector-effect به صورت مستقیم بر روی عناصر SVG اعمال می شود.

 

سینتکس:

element {
  vector-effect: value;
}

مقادیر اصلی:

1. none (مقدار پیش فرض):

   • این مقدار رفتار پیش فرض مرورگر را حفظ می کند. یعنی هنگام تغییر اندازه عنصر SVG، ضخامت خطوط، شعاع گوشه ها و سایر خصوصیات مرتبط با ترسیم، متناسب با مقیاس کلی تغییر می کنند.

2. non-scaling-stroke:

   • این مقدار باعث می شود ضخامت خطوط (stroke-width) هنگام تغییر اندازه عنصر SVG ثابت بماند. این برای زمانی که می خواهید ضخامت خطوط صرف نظر از اندازه کلی شکل، همیشه یکسان باشد، بسیار مفید است.
   • نکته: این مقدار فقط بر روی stroke-width تأثیر می گذارد. سایر خصوصیات مانند stroke-miterlimit یا stroke-linecap ممکن است همچنان تحت تأثیر مقیاس بندی قرار گیرند، مگر اینکه با مقادیر دیگر vector-effect ترکیب شوند.

3. non-scaling-stroke-width:

   • این مقدار مشابه non-scaling-stroke عمل می کند و ضخامت خطوط را ثابت نگه می دارد. در برخی مرورگرها ممکن است این دو مقدار به جای یکدیگر استفاده شوند، اما non-scaling-stroke عمومی تر است.

4. non-scaling-stroke-dasharray:

   • این مقدار باعث می شود که طول خط چین ها (dash array) در خطوط منقطع، هنگام تغییر اندازه ثابت بماند.

5. non-scaling-stroke-offset:

   • این مقدار باعث می شود آفست خطوط منقطع (stroke-dashoffset)، هنگام تغییر اندازه ثابت بماند.

6. non-scaling-miter:

   • این مقدار از کشیدگی بیش از حد گوشه های تیز (miter joints) هنگام مقیاس بندی جلوگیری می کند. این مقدار به طور خاص از stroke-miterlimit تأثیر می پذیرد و سعی می کند گوشه ها را با یک حد مشخص، حفظ کند.

7. inherit:

   • مقدار vector-effect از عنصر والد به ارث برده می شود.

ترکیب مقادیر: شما می توانید چندین مقدار را با کاما از هم جدا کرده و به ویژگی vector-effect اختصاص دهید تا رفتار ترکیبی را اعمال کنید.

path {
  vector-effect: non-scaling-stroke, non-scaling-miter;
}

این بدان معناست که خطوط و گوشه های تیز، هر دو ثابت خواهند ماند.

نکته مهم: ویژگی vector-effect به طور عمده بر روی عناصر SVG مانند <path>, <circle>, <rect>, <line>, <polygon>, <polyline> و <ellipse> تأثیر می گذارد.

 vector-effect ابزاری قدرتمند برای کنترل دقیق رندرینگ گرافیک های SVG است. در اینجا چند کاربرد متداول و مثال عملی آورده شده است:

 

1. حفظ ضخامت خطوط در آیکون ها:

   • این یکی از رایج ترین کاربردهاست. فرض کنید یک آیکون SVG دارید و می خواهید آن را در اندازه های مختلف (مثلاً در دکمه ها، منوها، یا هدر) استفاده کنید. اگر فقط اندازه SVG را تغییر دهید، ضخامت خطوط نیز تغییر می کند و ممکن است آیکون در اندازه های کوچک، بیش از حد ضخیم یا در اندازه های بزرگ، بیش از حد نازک به نظر برسد. با استفاده از non-scaling-stroke، ضخامت خطوط ثابت می ماند.

   • مثال:

     <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <style><span class="language-css">
         .icon-path {
           fill: none;
           stroke: black;
           stroke-width: 5; /* ضخامت 5 واحد */
           vector-effect: non-scaling-stroke; /* خطوط ثابت می مانند */
         }
       </style>
       <path class="icon-path" d="M20 20 L80 20 L50 80 Z"/>
     </svg>
     
     <svg width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <style>
         .icon-path {
           fill: none;
           stroke: black;
           stroke-width: 5;
           vector-effect: non-scaling-stroke;
         }
       </style>
       <path class="icon-path" d="M20 20 L80 20 L50 80 Z"/>
     </svg>
     

     در این مثال، هر دو مثلث، ضخامت خط 5 واحد را حفظ می کنند، حتی اگر اندازه کلی SVG متفاوت باشد.

2. کنترل گوشه های تیز (Miter Limit):

   • هنگامی که دو خط با زاویه تند به هم می رسند، مرورگرها یک گوشه تیز (miter join) ایجاد می کنند. اگر مقدار stroke-miterlimit کم باشد، این گوشه ها ممکن است بیش از حد کشیده و ظاهر ناخوشایندی ایجاد کنند. استفاده از non-scaling-miter می تواند به حفظ شکل گوشه ها کمک کند.

   • مثال:

     <svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
       <style><span class="language-css">
         .sharp-corner-default {
           fill: none;
           stroke: blue;
           stroke-width: 10;
           stroke-miterlimit: 1; /* حد پایین برای مایتِر */
         }
         .sharp-corner-vector-effect {
           fill: none;
           stroke: red;
           stroke-width: 10;
           stroke-miterlimit: 1;
           vector-effect: non-scaling-miter; /* جلوگیری از کشیدگی گوشه */
         }
       </style>
       <path class="sharp-corner-default" d="M20 80 L80 20 L140 80"/>
       <path class="sharp-corner-vector-effect" d="M20 20 L80 80 L140 20" transform="translate(0, 100)"/>
     </svg>
     

     در این مثال، خط قرمز (با vector-effect: non-scaling-miter) گوشه تیز خود را بهتر حفظ می کند در حالی که خط آبی ممکن است کشیده تر به نظر برسد.

3. خطوط منقطع (Dashed Lines):

   • اگر از خطوط منقطع استفاده می کنید و می خواهید الگوی خط چین (dash pattern) هنگام تغییر اندازه ثابت بماند، می توانید از non-scaling-stroke-dasharray و non-scaling-stroke-offset استفاده کنید.

   • مثال:

     <svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
       <style><span class="language-css">
         .dashed-default {
           fill: none;
           stroke: green;
           stroke-width: 3;
           stroke-dasharray: 10 5; /* 10 پیکسل خط، 5 پیکسل فاصله */
         }
         .dashed-scaled {
           fill: none;
           stroke: purple;
           stroke-width: 3;
           stroke-dasharray: 10 5;
           vector-effect: non-scaling-stroke-dasharray, non-scaling-stroke-offset;
         }
       </style>
       <path class="dashed-default" d="M20 30 L180 30"/>
       <path class="dashed-scaled" d="M20 70 L180 70"/>
     </svg>
     

     با تغییر اندازه SVG، خط بنفش الگوی خط چین خود را حفظ می کند، در حالی که خط سبز ممکن است الگویش تغییر کند.

4. ترکیب با فیلترها:

   • vector-effect می تواند بر نحوه اعمال فیلترها نیز تأثیر بگذارد، به خصوص اگر فیلترها به خصوصیات خطوط وابسته باشند.

نکات مهم در استفاده:

• پشتیبانی مرورگر: vector-effect در اکثر مرورگرهای مدرن به خوبی پشتیبانی می شود، اما همیشه بهتر است برای اطمینان، مستندات MDN را بررسی کنید.
• تأثیر بر عملکرد: در برخی موارد، استفاده از vector-effect ممکن است کمی بر عملکرد رندرینگ تأثیر بگذارد، به خصوص در گرافیک های بسیار پیچیده. با این حال، معمولاً این تأثیر ناچیز است.
• جایگزین ها: در برخی موارد، می توان با استفاده از ویژگی های SVG مانند vector-effect="non-scaling-stroke" یا با استفاده از CSS Variables و تکنیک های ترکیبی، به نتایج مشابهی دست یافت.

vector-effect ابزاری قدرتمند است که به شما کنترل بیشتری بر روی نحوه نمایش گرافیک های SVG می دهد و به ویژه در طراحی رابط های کاربری که نیاز به مقیاس پذیری و ثبات بصری دارند، بسیار مفید است.

ویژگی vector-effect در CSS یک قابلیت قدرتمند و تخصصی است که به طراحان و توسعه دهندگان وب امکان می دهد تا نحوه رندر شدن عناصر SVG را به طور دقیق کنترل کنند. این ویژگی به ویژه زمانی که با مقیاس پذیری گرافیک های برداری سروکار داریم، اهمیت پیدا می کند.

 

در حالت پیش فرض (vector-effect: none;)، همه خصوصیات SVG، از جمله ضخامت خطوط و ویژگی های گوشه ها، با تغییر اندازه کلی عنصر، متناسب با آن مقیاس بندی می شوند. این می تواند منجر به تغییرات ناخواسته در ظاهر گرافیک شود، مثلاً ضخامت خطوط در آیکون ها بسیار نازک یا بسیار ضخیم به نظر برسند.

با استفاده از مقادیری مانند non-scaling-stroke، non-scaling-miter، non-scaling-stroke-dasharray و non-scaling-stroke-offset، می توانیم رفتارهای پیش فرض را تغییر دهیم. non-scaling-stroke، برای مثال، ضخامت خطوط را ثابت نگه می دارد و اطمینان می دهد که آیکون ها در هر اندازه ای ظاهر یکنواختی داشته باشند. این قابلیت، نگهداری و استفاده مجدد از آیکون ها و عناصر SVG را در طرح های واکنش گرا (Responsive Design) بسیار آسان تر می کند.

درک کاربردهای vector-effect به شما کمک می کند تا گرافیک های SVG را با دقت بیشتری مدیریت کرده و از نتایج بصری مطلوب اطمینان حاصل کنید. این ویژگی، ابزاری ضروری برای هر کسی است که به دنبال بهینه سازی و کنترل دقیق رندرینگ گرافیک های برداری در وب است.