dx

Атрибут dx указывает смещение по оси X в позиции элемента или его содержимого.

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

Пример

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Some reference text -->
  <text x="10%" y="50%" fill="grey">SVG</text>

  <!-- The same text with a shift along the x-axis -->
  <text dx="50%" x="10%" y="50%">SVG</text>
</svg>

css

line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

feDropShadow

Для <feDropShadow>, dx определяет смещение тени по оси X. Единица измерения значения атрибута задается атрибутом primitiveUnits элемента <filter>.

Значение	<число>
Значение по умолчанию	`2`
Анимируемо	Да

feOffset

Для <feOffset>, dx определяет смещение по оси X графического ввода фильтра. Единица измерения значения атрибута задается атрибутом primitiveUnits элемента <filter>.

Значение	<число>
Значение по умолчанию	`0`
Анимируемо	Да

glyphRef

Предупреждение: Начиная с SVG2, <glyphRef> устарел и не должен использоваться.

Для <glyphRef>, dx определяет смещение глифа по оси X в системе метрик шрифта.

Значение	<число>
Значение по умолчанию	`0`
Анимируемо	Да

text

Для <text>, если он содержит одно значение, dx определяет смещение всех глифов по оси X.

Если значений несколько, dx определяет смещение каждого отдельного глифа по оси X относительно предыдущего глифа. Если значений меньше, чем глифов, оставшиеся глифы используют значение 0. Если значений больше, чем глифов, дополнительные значения игнорируются.

Значение	Список (<длина> \| <процент>)
Значение по умолчанию	нет
Анимируемо	Да

Пример

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="25%" y2="25%" />
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="0" x2="100%" y1="75%" y2="75%" />

  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="30%" x2="30%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Behaviors change based on the number
       of values in the attributes -->
  <text dx="20%" x="10%" y="25%">SVG</text>
  <text dx="0 10%" x="10%" y="50%">SVG</text>
  <text dx="0 10% 20%" x="10%" y="75%">SVG</text>
</svg>

css

line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}

tref

Предупреждение: Начиная с SVG2, <tref> устарел и не должен использоваться.

Для <tref>, если он содержит одно значение, dx определяет смещение всех глифов по оси X.

Значение	Список (<длина> \| <процент>)
Значение по умолчанию	нет
Анимируемо	Да

tspan

Для <tspan>, если он содержит одно значение, dx определяет смещение всех альтернативных глифов по оси X.

Значение	Список (<длина> \| <процент>)
Значение по умолчанию	нет
Анимируемо	Да

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

Спецификация
Модуль фильтров уровня 1 # element-attrdef-fedropshadow-dx
Модуль фильтров уровня 1 # element-attrdef-feoffset-dx
Scalable Vector Graphics (SVG) 2 # TextElementDXAttribute

© 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/dx