Почему «x» работает как свойство CSS при стилизации SVG?

Question

Я пытаюсь понять, какими вещами я могу управлять в SVG через CSS.

Вот пример, который показывает, где иногда атрибутами можно управлять с помощью CSS, а иногда нет:

div {
 border: dashed 1px grey; 
 padding: 0.5em; 
}

rect.controlled-by-css {
 stroke: red; 
 stroke-width: 2px; 
 x: 5; 
 y: 20; 
 height: 10px; 
 width: 10px; 
}

line.controlled-by-css {
 
 x1: 25; 
 y1: 25; 
 x2: 40; 
 y2: 40; 
 
 stroke: red; 
 stroke-width: 2px; 
}

<div> 

<svg> 
   <rect stroke ="black" x ="0" y ="0" height ="10" width ="10"/> 
   
   <line stroke ="black" x1 ="15" y1 =" 15" x2 ="25" y2 ="0"/> 
   
   <rect class ="controlled-by-css"/> 
   
   <!-- this line won't show up - x1, x2, y1, y2 are invalid property names --> 
   <line class ="controlled-by-css"/> 
</svg> 
</div> 

Что здесь происходит?

Я просматривал эту документацию MDN,

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation

, где говорится:

Атрибуты представления SVG - это свойства CSS, которыеможет использоваться в качестве атрибутов для элементов SVG.

Но x, y не указаны в качестве элементов представления, но все же могут управляться с помощью CSS.

Как узнать, какими атрибутами можно управлять с помощью CSS, а какие нет?

Answer 1

Ответ в документации для <rect>

Примечание. Начиная с SVG2 x, y, width, height, rx и ry - это свойства геометрии, означающиеатрибуты также можно использовать в качестве свойств CSS для этого элемента.

Подробнее о свойствах геометрии см. документацию w3 здесь .

Также похоже на атрибуты представлениятакже контролируются CSS - как указано в документации для свойства transform .

Вот более общая документация от w3 по стилю: https://www.w3.org/TR/SVG2/styling.html

Соответствующая документация:

6.6.Атрибуты презентации

Некоторые свойства стиля можно указывать не только в таблицах стилей и атрибутах 'style', но также в атрибутах презентации.Это атрибуты, имя которых совпадает (или похоже) с данным свойством CSS и чье значение анализируется как значение этого свойства.Атрибуты представления вносят вклад в авторский уровень каскада, следуя всем остальным таблицам стилей уровня автора, и имеют специфичность 0.

Поскольку атрибуты представления анализируются как значения CSS, а не как объявления!Атрибут будет иметь недопустимое значение.См. Синтаксис атрибута для получения подробной информации о том, как анализируются атрибуты представления.

Не все свойства стиля, которые могут повлиять на визуализацию SVG, имеют соответствующий атрибут представления.Другие атрибуты (которые совместно используют имя свойства стиля) не должны анализироваться как атрибут представления и не должны влиять на каскадирование и наследование CSS.Кроме того, только элементы в пространстве имен SVG поддерживают атрибуты представления.Большинство атрибутов представления SVG могут быть указаны для любого элемента в пространстве имен SVG, где нет конфликта имен с существующим атрибутом.Однако свойства геометрии имеют только эквивалентные атрибуты представления для обозначенных элементов.Атрибуты с тем же именем в других элементах не должны влиять на каскадирование и наследование CSS.

За исключением случаев, указанных в таблице для атрибутов представления преобразования, имя атрибута представления совпадает с именем свойства в нижнем регистребуквы.