Свойство CSS `vector-effect`

Свойство vector-effect CSS подавляет определённые эффекты трансформации в SVG, позволяя, например, сохранять одинаковую ширину дороги на карте независимо от масштаба карты или фиксировать положение и размер легенды диаграммы при любых других трансформациях. Его можно использовать только с элементами SVG, которые поддерживают атрибут vector-effect. При использовании значение CSS переопределяет любые значения атрибута vector-effect этого элемента.

Синтаксис

/* 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

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

Формальный синтаксис

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

Примеры

Предотвращение масштабирования обводки SVG с помощью CSS

Начнём с изображения SVG размером 200 × 100, содержащего два прямоугольника внутри группы. Группа увеличена и повёрнута. Второму прямоугольнику присвоен класс 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="#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> с указанным классом зададим обводку, которая не масштабируется.

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

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

Переопределение значений масштабирования обводки SVG с помощью CSS

В этом примере начнём с изображения SVG, похожего на использованное в предыдущем примере. Здесь элемент <g> повёрнут, как и прежде, но не масштабирован. Для элементов <rect> задан общий центр трансформаций, а значение их SVG-атрибутов vector-effect установлено в 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="#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>, а для второго прямоугольника задана немасштабируемая обводка.

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