将<style>放在SVG中的哪里?

时间:2017-06-22 10:11:08

标签: svg

很抱歉,如果这可能是基于意见的,但我希望有一个正确的答案..

&#xA;&#xA;

哪里应该在SVG文档中放置内联CSS样式?在下面提供的&#xA;示例中,我定义了两种样式和一个使用它们的圆圈。

&#xA;&#xA;

第一种样式在 defs 标签和第二个样式在 svg 标签内定义。

&#xA;&#xA;

这两种样式都成功显示在圆圈上(至少在Chrome中它们是做,但没有检查其他浏览器)。

&#xA;&#xA;

我的问题是哪种方式更标准?

&#xA;&#xA;

我认为在 defs 中保留样式可以使整个SVG更加整洁。但是,可以声称我不应该使用 defs 标签,因为没有人用&lt; use&gt;

&#xA;&#xA; <来引用样式p>谢谢!

&#xA;&#xA;

&#xD;&#xA;
&#xD;&#xA;
 <代码>&lt; svg height =“100”width =“100”&gt;&#xD;&#xA; &lt; defs id =“someDefs”&gt;&#xD;&#xA; &lt; style id =“style1”&gt;&#xD;&#xA; .blue-fill {&#xD;&#xA;填充:蓝色;&#xD;&#xA; }&#的xD;&#XA; &LT; /风格&GT;&#的xD;&#XA; &LT; / DEFS&GT;&#的xD;&#XA; &lt; style id =“style2”&gt;&#xD;&#xA; .red-stroke {&#xD;&#xA;中风:红色;&#xD;&#xA;笔画宽度:12&#xD;&#xA; }&#的xD;&#XA; &LT; /风格&GT;&#的xD;&#XA; &lt; circle cx =“50”cy =“50”r =“40”class =“blue-fill red-stroke”/&gt;&#xD;&#xA;&lt; / svg&gt;  &#的xD;&#XA; 
&#的xD;&#XA;
&#的xD;&#XA;

&#XA;

2 个答案:

答案 0 :(得分:4)

  

没关系。这两种方法都不是更标准的方法。 <style>元素无论如何都不可渲染,因此没有必要将它们放入<defs>部分

Paul LeBeau评论道。

在阅读this article about style on MDN后,显示了SVG根目录下的样式示例,我更确信将<style>放在<defs>而不是{{1}下}。

此外,由于<defs>标记确实是应该呈现的可重用图形元素,并且<style>不是可渲染元素,因此没有必要保留它。

答案 1 :(得分:0)

proj |--Module-1 | |--src/main/scala | |-- MainClass1.scala |--Module-2 | |--src/main/scala | |-- MainClass2.scala |--build.sbt 中定义的图形元素不会直接呈现,只会使用<defs>呈现。因此,如果定义图形对象供以后使用,则使用use始终是一个好习惯。它还增加了代码的可读性。

More Information