Атрибут y тега <svg>

Описание

Атрибут y в элементе <svg> определяет вертикальное смещение верхнего левого угла SVG-контейнера относительно точки отсчета. Работает аналогично атрибуту x, но для вертикальной оси.

Пример использования:
<svg y="30" width="100" height="100"> <circle cx="50" cy="50" r="40" fill="#2ecc71"/> </svg>

Ключевые характеристики:

Характеристика Описание
Тип значений Число (пиксели) или процент
Значение по умолчанию 0
Область применения Только для встроенных SVG в HTML
CSS-эквиваленты top, margin-top, transform: translateY()

Практическое применение:

  • Вертикальное выравнивание иконок в тексте
  • Создание многослойных SVG-композиций
  • Точное позиционирование графических элементов
  • Смещение относительно базовой линии текста

Пример вертикального выравнивания:

<p style="font-size: 24px;"> Текст с иконкой <svg y="-5" width="20" height="20" viewBox="0 0 24 24" style="vertical-align: middle;"> <circle cx="12" cy="12" r="10" fill="#e74c3c"/> </svg> в строке </p>

Рекомендации по использованию:

  • Для сложного позиционирования комбинируйте с CSS
  • Используйте отрицательные значения для точной подгонки
  • Тестируйте в различных браузерах
  • Для адаптивности предпочитайте относительные единицы

Важные ограничения:

  • Не действует в автономных SVG-документах
  • Может переопределяться CSS-свойствами
  • Не изменяет систему координат внутри SVG
  • В сложных случаях лучше использовать transform

Примечание: Для точного вертикального выравнивания SVG-элементов в современных проектах рекомендуется использовать CSS Flexbox или CSS Grid вместо атрибутов позиционирования.