Question

我正在尝试找出我可以通过CSS在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，宽度，高度，rx和ry是几何属性，这意味着这些属性也可以用作该元素的CSS属性。

在w3 documentation here上有关几何属性的更多详细信息。

看起来documentation for the transform property也可以通过CSS控制表示属性。

这是w3中有关样式的更一般的文献资料： https://www.w3.org/TR/SVG2/styling.html

相关文档为：

6.6。演示属性

某些样式属性不仅可以在样式表和“样式”属性中指定，还可以在演示属性中指定。这些属性的名称与给定的CSS属性匹配（或相似），并且其值被解析为该属性的值。表示属性在所有其他作者级别的样式表之后，都为级联的作者级别做出了贡献，并且特异性为0。

由于演示文稿属性被解析为CSS值，而不是声明，因此，演示文稿属性中的！important声明将导致其具有无效值。有关如何解析演示文稿属性的详细信息，请参见属性语法。

并非所有可能影响SVG渲染的样式属性都具有相应的外观属性。其他属性（恰好共享样式属性的名称）不能被解析为表示属性，也不能影响CSS级联和继承。另外，只有SVG名称空间中的元素才支持表示属性。大多数SVG表示属性可以在SVG名称空间中与现有属性没有名称冲突的任何元素上指定。但是，几何属性仅在指定元素上具有等效的表示属性。在其他元素上具有相同名称的属性不得影响CSS级联和继承。

除了表中有关转换表示属性的注释外，表示属性名称与属性名称相同，以小写字母表示。

设置SVG样式时，为什么“ x”作为CSS属性起作用？

1 个答案: