vector-effect

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

Примечание: Как атрибут презентации, vector-effect может использоваться как свойство CSS.

Элементы

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

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

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

none: Это значение указывает на то, что никакой векторный эффект не должен применяться, т.е. используется поведение по умолчанию, которое заключается в заливке геометрии фигуры указанной краской, а затем обводке контура указанной краской.
non-scaling-stroke: Это значение изменяет способ обводки объекта. Обычно обводка включает вычисление контура обводки траектории фигуры в текущей системе координат пользователя и заполнение этого контура краской обводки (цветом или градиентом). Результирующий визуальный эффект этого значения заключается в том, что ширина линии обводки не зависит от преобразований элемента (включая неравномерное масштабирование и сдвиги) и уровня масштабирования.
non-scaling-size: Это значение определяет специальную систему координат пользователя, используемую элементом и его потомками. Масштаб этой системы координат пользователя не изменяется, несмотря на любые изменения преобразований из пространства координат узла. Однако это не указывает на подавление вращения и наклона. Кроме того, это не указывает на начало системы координат пользователя. Поскольку это значение подавляет масштабирование системы координат пользователя, оно также имеет характеристики non-scaling-stroke.
non-rotation: Это значение определяет специальную систему координат пользователя, используемую элементом и его потомками. Вращение и наклон этой системы координат пользователя подавляются, несмотря на любые изменения преобразований из пространства координат узла. Однако это не указывает на подавление масштабирования. Кроме того, это не указывает на начало системы координат пользователя.
fixed-position: Это значение определяет специальную систему координат пользователя, используемую элементом и его потомками. Положение системы координат пользователя фиксируется, несмотря на любые изменения преобразований из пространства координат узла. Однако это не указывает на подавление вращения, наклона и масштабирования. При одновременном определении этого векторного эффекта и свойства transform это свойство используется для этого эффекта.

Примеры

Установка `vector-effect` как `non-scaling-stroke`

html

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

Результат

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

Спецификация
Scalable Vector Graphics (SVG) 2 # VectorEffects

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`vector-effect`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

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

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