为什么 Chrome 会从 style 属性中读取 svg 圆半径？答案

【问题标题】：Why does Chrome read the svg circle radius from the style attribute?为什么 Chrome 会从 style 属性中读取 svg 圆半径？
【发布时间】：2015-08-09 17:01:23
【问题描述】：

我使用 chrome 开发工具进行开发。

我刚刚用 IE11 做了一个演示。

嗯，是的，我的错误是不检查 IE，下面的语法不是有意的（在 d3.js 中设置属性时出错）。但是我很受伤，因为我的图表没有显示，我想了解为什么我无法早点发现错误......

下面的 sn-p 适用于 Chrome，不适用于 IE11。

<html>
<body>
<svg width="120" height="120">
<circle style="fill: rgb(60,60,60); r: 20px; " cy="30" cx="20"></circle>
</svg>
</body>
</html>

【问题讨论】：

标签： css google-chrome svg internet-explorer-11

【解决方案1】：

SVG 规范的当前发布版本是1.1，它声明圆的半径是一个属性而不是 CSS 属性。这就是 IE 实现的。

有一个新版本的 SVG 规范正在开发中，version 2。其中，圆的半径（以及许多其他当前属性）将是 CSS 属性。这就是 Chrome 实现的。

Chrome 正在尝试与 Firefox 一样实现部分 SVG 2 规范。不同的 UA 实施了 SVG 2 规范的不同部分，因为他们在 SVG 2 完成之前对其进行了调查，以证明实施它是可行的。

【讨论】：

好的，听起来很合理，但是在您链接的样式下的 SVG 2 文档中，它说：“CSS 2.1 中未定义以下 SVG 属性...”并且有几何属性。是否还有相应的新 CSS 规范允许这样做，是否有一个地方可以让我以黑白方式阅读 SVG 的几何属性将成为样式属性？
我想知道是否有办法从规范中找出自己。
或者这是否意味着样式属性是在 SVG 2 中定义的，因此不需要在 CSS 中指定？
你误读了。这些属性在 CSS 2.1 中没有定义，它们在下面定义。没有单独的 CSS 规范，CSS 是在 SVG 2 规范文档本身中定义的。您正在查看的是来自 SVG 的黑白几何属性，它们将成为样式属性。您上面的最终评论是正确的。