vector-effect

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

vector-effect CSS 屬性會抑制 SVG 中特定的轉換效果，從而允許一些效果，例如地圖上的道路無論地圖如何縮放都能保持相同的寬度，或者圖表圖例無論其他轉換如何都能保持其位置和大小。它只能與接受 vector-effect 屬性的 SVG 元素一起使用。使用時，CSS 值會覆蓋元素 vector-effect 屬性的任何值。

語法

css

/* Keywords */
vector-effect: none;
vector-effect: non-scaling-stroke;

/* Global values */
vector-effect: inherit;
vector-effect: initial;
vector-effect: revert;
vector-effect: revert-layer;
vector-effect: unset;

值

none: 不將任何向量效果應用於元素，這意味著它將像往常一樣完全受轉換的影響。
non-scaling-stroke: 元素的繪製描邊寬度在物理上將等於其定義的描邊寬度，即使該元素由於自身或其座標系的轉換而進行了縮放。無論是透過轉換縮放元素還是透過物理調整整個影像的大小，情況都是如此。

注意：規範定義了另外三個值：non-scaling-size、non-rotation 和 fixed-position，但這些值沒有實現，並被認為是處於危險中的。

正式語法

vector-effect = 
  none                |
  non-scaling-stroke  |
  non-scaling-size    |
  non-rotation        |
  fixed-position

示例

使用 CSS 阻止 SVG 描邊縮放

在這裡，我們從一個 200x100 的 SVG 影像開始，該影像包含一個組中的兩個矩形。該組被放大並旋轉。兩個矩形中的第二個具有 thinned 類。

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <g
    transform="scale(2.3) rotate(23)"
    transform-origin="100 50"
    stroke-width="3"
    stroke="orange"
    fill="#ddeeff88">
    <rect x=" 60" y="20" width="30" height="60" />
    <rect x="110" y="20" width="30" height="60" class="thinned" />
  </g>
</svg>

對於這個 SVG 影像，我們應用 width: 500px 使其大於其固有大小，並設定帶有類的 <rect> 具有非縮放描邊。

css

svg {
  width: 500px;
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

結果是，兩個矩形中的第一個具有大約 17 的明顯（視覺）描邊寬度，而第二個矩形儘管以與第一個矩形相同的方式放大，但仍具有 3 的明顯描邊寬度。

使用 CSS 覆蓋 SVG 描邊縮放值

在這種情況下，我們從一個與上一個示例中使用的類似 SVG 影像開始。在這裡，<g> 元素像以前一樣旋轉，但沒有對其應用縮放。<rect> 元素被賦予一個共同的變換原點，並且它們的 vector-effect SVG 屬性設定為 none。

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <g
    transform="rotate(23)"
    transform-origin="100 50"
    stroke-width="3"
    stroke="orange"
    fill="#ddeeff88">
    <rect
      x=" 60"
      y="20"
      width="30"
      height="60"
      transform-origin="100 50"
      vector-effect="none" />
    <rect
      x="110"
      y="20"
      width="30"
      height="60"
      transform-origin="100 50"
      vector-effect="none"
      class="thinned" />
  </g>
</svg>

像以前一樣，SVG 使用 CSS 製作得大於其固有大小。這次，縮放直接應用於 <rect> 元素，並且第二個矩形被設定為具有非縮放描邊。

css

svg {
  width: 500px;
}
svg rect {
  transform: scale(2.3);
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

結果在視覺上與上一個示例相同。我們可以看到，none 的屬性值被 CSS 值 non-scaling-stroke 覆蓋，並且即使縮放是直接在 <rect> 而不是在其父 <g> 元素上完成的，向量效果也得到了遵守。

規範

規範
Scalable Vector Graphics (SVG) 2 # VectorEffectProperty

瀏覽器相容性

另見

stroke
<basic-shape> 資料型別
SVG vector-effect 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者在2025 年 8 月 13 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題