SVG 填充属性

Question

我有SVG property(fill/stroke/stroke-width)应该在 style="..."否则在外面

例子:

<rect x="10" y="10" fill="red" stroke="green" stroke-width="1" width="80px" height="50"/>

--------------------或者--------------------

<rect x="10" y="10" style="fill:red; stroke:green; stroke-width:1;" width="80px" height="50"/>

哪个是正确的？两者都在工作和推理....

Answer 1

事实上，两者都是正确的。 SVG 创建于 90 年代后期。那里到处都是关于如何自动生成内容的各种想法。例如，一种是 XSL-FO，它使用 CSS 的大部分属性，但作为元素的属性:

<fo:block font-size="16px" color="red>Hello</fo:block>

在那个时候，将 SVG 样式的可能性加倍似乎是个好主意。

但是，您需要注意不同属性如何级联:

1. 如果一个元素有一个style属性，先用这个

2. 如果 SVG 文件有中央 CSS 声明，例如，在 <style> 中元素，那些是第二个使用的。

3. 该属性仅然后用作后备。

举例说明:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>rect { fill: yellow; }</style>

  <rect fill="red" style="fill: green" width="100" height="100"/>
</svg>

<rect> 的结果颜色是……绿色的。