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

Elements

You can use this attribute with the following SVG elements:

• <circle>
• <ellipse>
• <foreignObject>
• <image>
• <line>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tspan>
• <use>

Usage notes

none

This value specifies that no vector effect shall be applied, i.e., the default rendering behavior is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.

non-scaling-stroke

This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependent on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

Examples

Settingvector-effect asnon-scaling-stroke

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

Result

Specifications

Browser compatibility

See also

• CSSvector-effect property