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>