vector-effect

**vector-effect** CSS 属性抑制 SVG 中的特定变换效果，从而允许诸如地图上道路在无论地图缩放多少都保持相同宽度之类的效果，或者允许图表键无论其他变换如何都保持其位置和大小。它只能与接受vector-effect 属性的 SVG 元素一起使用。使用时，CSS 值会覆盖元素的vector-effect 属性的任何值。

语法

css

/* Keywords */
vector-effect: none;
vector-effect: non-scaling-stroke;
vector-effect: non-scaling-size;
vector-effect: non-rotation;
vector-effect: fixed-position;

/* 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="#DEF8">
    <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="#DEF8">
    <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> 元素上进行的，矢量效果也会被应用。

规范

规范
可缩放矢量图形 (SVG) 2 # VectorEffect 属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

stroke
<basic-shape> 数据类型
SVG vector-effect 属性