Question

我有SVG property(fill/stroke/stroke-width)应位于style="..."或其他方面

示例：

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

----------------------- OR --------------------

<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风格加倍的可能性似乎是个好主意。

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

如果元素具有style属性，则首先使用
如果SVG文件具有中央CSS声明，例如，在<style>元素中，则使用第二个。
该属性仅用作为后备。

例如：

<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>的结果颜色是......绿色。

SVG填充属性

1 个答案: