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 上查看此页面 • 报告此内容的问题