css - 为什么在设置 SVG 样式时 'x' 可以用作 CSS 属性？

Question

我正在尝试弄清楚我可以通过 CSS 在 SVG 上控制哪些内容。

这是一个示例，显示了有时可以通过 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 presentation attributes are CSS properties that can be used as attributes on SVG elements.

但是 x, y 没有被列为表示元素，但仍然可以用 CSS 控制。

我怎么知道哪些属性可以用 CSS 控制，哪些不能？

Answer 1

答案在 <rect> 的文档中

Note: Starting with SVG2 x, y, width, height, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

有关几何属性的更多详细信息，请访问 w3 documentation here .
看起来表示属性也可以由 CSS 控制——如 documentation for the transform property 所示。 .
以下是来自 w3 的关于样式的更一般文档:
https://www.w3.org/TR/SVG2/styling.html
相关文档是:

6.6. Presentation attributes

Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also in presentation attributes. These are attributes whose name matches (or is similar to) a given CSS property and whose value is parsed as a value of that property. Presentation attributes contribute to the author level of the cascade, following all other author-level style sheets, and have specificity 0.

Since presentation attributes are parsed as CSS values, not declarations, an !important declaration within a presentation attribute will cause it to have an invalid value. See Attribute syntax for details on how presentation attributes are parsed.

Not all style properties that can affect SVG rendering have a corresponding presentation attribute. Other attributes (which happen to share the name of a style property) must not be parsed as a presentation attribute and must not affect CSS cascading and inheritance. Also, only elements in the SVG namespace support presentation attributes. Most SVG presentation attributes may be specified on any element in the SVG namespace where there is not a name clash with an existing attribute. However, the geometry properties only have equivalent presentation attributes on designated elements. Attributes of the same name on other elements must not affect CSS cascading and inheritance.

Except as noted in the table for the transform presentation attributes, the presentation attribute name is the same as the property name, in lower-case letters.