vector-effect

vector-effect 属性指定在绘制对象时使用的矢量效果。矢量效果在任何其他合成操作（例如过滤器、遮罩和剪辑）之前应用。

注意： 作为表示属性，vector-effect 可以用作 CSS 属性。

元素

你可以将此属性与以下 SVG 元素一起使用

使用说明

值	`none` \| `non-scaling-stroke` \| `non-scaling-size` \| `non-rotation` \| `fixed-position`
默认值	`none`
可动画	离散

none: 此值指定不应用任何矢量效果，即使用默认渲染行为，即首先使用指定油漆填充形状的几何形状，然后使用指定油漆描边轮廓。
non-scaling-stroke: 此值修改描边对象的方式。通常，描边涉及在当前用户坐标系中计算形状路径的描边轮廓，并使用描边油漆（颜色或渐变）填充该轮廓。此值的最终视觉效果是描边宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。
non-scaling-size: 此值指定元素及其后代使用的特殊用户坐标系。即使宿主坐标空间发生任何变换变化，该用户坐标系的比例也不会改变。但是，它没有指定旋转和倾斜的抑制。此外，它没有指定用户坐标系的原点。由于此值抑制用户坐标系的缩放，它也具有 non-scaling-stroke 的特征。
non-rotation: 此值指定元素及其后代使用的特殊用户坐标系。即使宿主坐标空间发生任何变换变化，该用户坐标系的旋转和倾斜也会被抑制。但是，它没有指定缩放的抑制。此外，它没有指定用户坐标系的原点。
fixed-position: 此值指定元素及其后代使用的特殊用户坐标系。即使宿主坐标空间发生任何变换变化，用户坐标系的位置也会固定。但是，它没有指定旋转、倾斜和缩放的抑制。当此矢量效果和 transform 属性同时定义时，该属性将被消耗以用于此效果。

示例

将 `vector-effect` 设置为 `non-scaling-stroke`

html

<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>