SVG:使用属性或CSS来设置样式?

问题描述 投票:18回答:3

在HTML中,建议从Style中分离Content,因此您应该为样式创建外部CSS文件。由于我刚刚开始使用SVG,我现在想知道:此规则是否也适用于SVG?

什么被认为是更好的代码风格?

  • <circle fill="yellow" />
  • 或者<circle style="fill: yellow;" />
coding-style svg
3个回答
13
投票

我通常更喜欢<circle fill="yellow" /><circle style="fill: yellow;" />,因为它更短,更容易操纵,例如,getAttributeNS(null, "fill")

但是,我更喜欢使用单独的样式元素,就像使用HTML一样,例如:

  <style>
    circle{
      fill: yellow;
    }
  </style>    

它具有使用CSS的所有相同优点,例如可以轻松地一次更改许多元素的stlye。

您还可以将CSS放在外部文件中并添加:

<?xml-stylesheet type="text/css" href="your_CSS.css" ?>

在svg元素之前。


18
投票

我来到这里是因为我试图记住属性或风格是否具有更高的优先级。这是你想要一个在另一个上面的一个实际原因。

属性作为“演示提示”应用,就像它们是级联样式表中的第一个一样。 In other words, this gives them lowest precedence.

因此,从最低到最高的优先顺序是

  1. 属性
  2. CSS样式表
  3. 内联样式

有点令人困惑的是,内联样式的优先级比其下一个属性的优先级要高得多。 (我一直要看这个!)

也没有任何额外的表示属性,我们鼓励使用CSS样式,但听起来不像演示属性很快就会消失。

更多细节可以在Presentation Attributes section of the Styling chapter of the SVG standard找到。


3
投票

如果是内容或它的表现,差异总是如此。

如果圆圈是内容并且必须显示css是否可用,那么第一个选项就是那个。

但是,如果圆圈只是网站设计的一部分,并且没有向内容添加任何内容,那么它应该是第二个选项。或者使用css类。

© www.soinside.com 2019 - 2024. All rights reserved.