vector-effect

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она поддерживается браузерами с ⁨июля 2020⁩ года.

Свойство vector-effect задаёт векторный эффект, используемый при отрисовке объекта. Векторные эффекты применяются до выполнения любых других операций композитинга, то есть фильтров, масок и обрезки.

Примечание: У vector-effect как у атрибута представления также есть соответствующее свойство CSS: vector-effect. Если заданы оба варианта, приоритет имеет свойство CSS.

Элементы

Этот атрибут можно использовать со следующими элементами SVG:

Примечания по использованию

Значение	`none` \| `non-scaling-stroke` \| `non-scaling-size` \| `non-rotation` \| `fixed-position`
Значение по умолчанию	`none`
Анимируемое	дискретно

none: Это значение указывает, что векторный эффект не применяется. Используется поведение отрисовки по умолчанию: сначала геометрия фигуры заполняется заданной заливкой, затем её контур обводится заданной краской.
non-scaling-stroke: Это значение изменяет способ обводки объекта. Обычно обводка включает вычисление контура обводки пути фигуры в текущей системе координат пользователя и заполнение этого контура цветом обводки (цветом или градиентом). В результате применения этого значения ширина обводки не зависит от преобразований элемента (включая неравномерное масштабирование и сдвиг) и уровня масштабирования.

Примечание: Спецификация определяет ещё три значения: non-scaling-size, non-rotation и fixed-position, однако они не реализованы и считаются находящимися под угрозой исключения.

Примеры

Задание `vector-effect` в качестве `non-scaling-stroke`

<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>

  <!-- scaled -->
  <path
    transform="translate(100,0) scale(4,1)"
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>

  <!-- fixed-->
  <path
    vector-effect="non-scaling-stroke"
    transform="translate(300, 0) scale(4, 1)"
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>
</svg>

Результат

Спецификации

Спецификация
Масштабируемая векторная графика (SVG) 2> # Свойство VectorEffect>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`vector-effect`	≤80	≤80	≤72	≤67	≤13.1	≤80	≤79	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

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

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect