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>