vector-effect

The vector-effect property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations: filters, masks and clips.

Usage context

The value "non-scaling-stroke" is a keyword for a predefined vector effect that causes an object's stroke-width to be unaffected by transformations and zooming.

The value "non-scaling-stroke" is designed so that it can be implemented without the entire vector effect engine. For example, profiles of SVG may restrict the values of vector-effect to be "default" or "non-scaling-stroke". In effect this requires no processing of vector effects, rather it is always the default rendering order with a different set of transformations.

Example

Example: vector-effect="non-scaling-stroke"

<svg viewBox="0 0 500 240">
     <!-- normal -->
     <path d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path>

     <!-- scaled -->
     <path transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black"
        stroke-width="2px" fill="none"></path>

     <!-- fixed-->
     <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z"
        stroke="black" stroke-width="2px" fill="none"></path>
</svg>

Result

Elements

The following elements can use the stroke attribute

• Shape elements »