dy

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

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

Пример

html

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

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

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

css

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

feDropShadow

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

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

feOffset

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

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

glyphRef

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

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

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

text

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

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

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

Пример

html

<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Horizontal lines -->
  <line x1="0" x2="100%" y1="30" y2="30" />
  <line x1="0" x2="100%" y1="40" y2="40" />
  <line x1="0" x2="100%" y1="50" y2="50" />
  <line x1="0" x2="100%" y1="60" y2="60" />

  <!-- Vertical lines -->
  <line x1="10" x2="10" y1="0" y2="100%" />
  <line x1="50" x2="50" y1="0" y2="100%" />
  <line x1="90" x2="90" y1="0" y2="100%" />

  <!-- Behaviors change based on the number of values in the attributes -->
  <text dy="20" x="10" y="30">SVG</text>
  <text dy="0 10" x="50" y="30">SVG</text>
  <text dy="0 10 20" x="90" y="30">SVG</text>
</svg>

css

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

tref

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

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

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

tspan

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

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

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

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

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