Skip to content
Related Articles

Related Articles

SVG vector-effect Attribute
  • Last Updated : 05 Nov, 2020

The vector-effect attribute defines the vector effect to use when drawing an object. These effects are applied before the compositing operations of filters, masks and clips. It has effect only on the <circle>, <ellipse>, <foreignObject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> <tspan>, and <use> elements.

Note: This effect can also be used as a CSS property.

Syntax:

vector-effect = none | non-scaling-size | non-scaling-stroke 
                          | fixed-position | non-rotation 

Attribute Values: This attribute accepts the values mentioned above and described below:

  • none: It specifies that no vector effect shall be applied. This is the default value of the attribute.
  • non-scaling-stroke: It modifies the way an object is stroked. The stroke width is no longer dependent on the transformations of the element and zoom level.
  • non-scaling-size: It specifies that the scale of the user coordinate system used by the element and its descendants does not change.
  • non-rotation: It specifies that the rotation and skew of the user coordinate system used by the element and its descendants are suppressed.
  • fixed-position: It specifies that the position of the user coordinate system used by the element and its descendants is fixed.

Example 1: The example below illustrates the use of the word-spacing attribute using non-scaling-stroke attribute value.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;
            font-size: 40px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="120 5 1200 940">
        <path vector-effect="non-scaling-size"
            transform="translate(100,0)scale(4,1)" 
            d="M10,20L40,100L39,200z"
            stroke="green" stroke-width="2px" 
            fill="none">
        </path>
  
        <path vector-effect="non-scaling-stroke" 
            transform="translate(300,0)scale(4,1)" 
            d="M10,20L40,100L39,200z"
            stroke="green" stroke-width="2px" 
            fill="none">
        </path>
    </svg>
</body>
  
</html>

chevron_right


Output:



Example 2: Below example illustrates the use of the word-spacing attribute using non-scaling-size attribute value.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; 
            text-align: center;">
        GeeksforGeeks
    </h1>
  
    <div class="geeks" style="text-align: center;">
  
        <!-- Here we have not applied
         vector-effect attribute  -->
        <svg width="200" height="200" 
            viewBox="0 0 50 50">
              
            <circle cx="25" cy="25" r="20" fill="none" 
                stroke="green" stroke-width="2" />
              
            <path d="M25 15 L 25 35" fill="none" 
                    stroke="green" stroke-width="2" 
                    stroke-linecap="round" />
              
            <path d="M15 25 L 35 25" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round" />
        </svg>
  
        <!-- Here we have applied
         vector-effect attribute  -->
        <svg width="200" height="200" 
            viewBox="0 0 50 50">
              
            <circle cx="25" cy="25" r="20" fill="none" 
                stroke="green" stroke-width="2"
                vector-effect="non-scaling-stroke" />
              
            <path d="M25 15 L 25 35" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round"
                vector-effect="non-scaling-size" />
              
            <path d="M15 25 L 35 25" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round"
                vector-effect="non-scaling-stroke" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :