vector-effect

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

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

注意： 作为演示属性，vector-effect 还有一个对应的 CSS 属性：vector-effect。当两者都被指定时，CSS 属性具有优先权。

元素

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

用法说明

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

none: 此值指定不应用任何矢量效果，即使用默认渲染行为，该行为是首先用指定的画笔填充形状的几何图形，然后用指定的画笔描边轮廓。
non-scaling-stroke: 此值修改对象的描边方式。正常情况下，描边涉及在当前用户坐标系中计算形状路径的描边轮廓，并用描边画笔（颜色或渐变）填充该轮廓。此值的最终视觉效果是，描边宽度不依赖于元素的变换（包括非均匀缩放和仿射变换）以及缩放级别。

注意： 规范定义了另外三个值：non-scaling-size、non-rotation 和 fixed-position，但这些值尚未实现，并且被认为是“有风险的”。

示例

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