vector-effect

none

К элементу не применяются векторные эффекты, то есть он будет полностью подвержен преобразованиям в обычном режиме.

non-scaling-stroke

Ширина линии элемента, нарисованная в соответствии с определённой шириной, будет физически одинаковой, даже если размер элемента увеличился или уменьшился из-за преобразований, будь то самого элемента, или его координатной системы. Это справедливо, независимо от того, масштабируется ли элемент с помощью преобразований или путём физического изменения размера всего изображения.

non-scaling-size Экспериментальная

Элемент будет игнорировать эффекты любых преобразований масштабирования.

non-rotation Экспериментальная

Элемент будет игнорировать эффекты любых поворотных преобразований.

fixed-position Экспериментальная

Элемент будет игнорировать эффекты любых преобразований переноса.

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

Здесь мы начинаем с изображения SVG размером 200x100, содержащего два прямоугольника внутри группы. Группа масштабируется и поворачивается. У второго из двух прямоугольников есть класс thinned.

<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> свойство не-масштабирования штрихов.

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

В результате первый из двух прямоугольников имеет видимую ширину штриха приблизительно 17, в то время как у второго прямоугольника видимая ширина штриха остаётся 3, несмотря на то, что он был масштабирован так же, как и первый прямоугольник.

В этом случае мы начинаем с аналогичного изображения SVG, используемого в предыдущем примере. Здесь элемент <g> поворачивается, как и раньше, но к нему не применяется масштабирование. Элементы <rect> получают общую точку начала преобразований и имеют атрибут vector-effect SVG, установленный в значение none.

<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> и второй прямоугольник настраивается так, чтобы его штрихи не масштабировались.

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

Результат визуально идентичен результату предыдущего примера. Мы видим, что значение атрибута none переопределяется значением CSS non-scaling-stroke, и что векторные эффекты учитываются, даже если масштабирование было выполнено непосредственно на элементе <rect> , а не на родительском элементе <g>.

• stroke
• <basic-shape> тип данных
• Атрибут SVG vector-effect