将 <style> 放在 SVG 的什么位置？答案

【问题标题】：Where to put <style> inside SVG?将 <style> 放在 SVG 的什么位置？
【发布时间】：2019-02-25 13:31:58
【问题描述】：

对不起，如果这可能是基于意见的，但我希望有一个正确的答案..

内联 CSS 样式应该放在 SVG 文档中的什么位置？在里面我在下面提供的示例定义了两种样式和一个使用它们的圆圈。

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

两种样式都成功显示在圆圈上（至少在 Chrome 中是这样，但没有检查其他浏览器）。

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

我认为在 defs 中保留样式可以使整个 SVG 更加整洁。但是，有人可以声称我不应该使用 defs 标签，因为没有人使用 <use> 引用样式

谢谢！

<svg height="100" width="100">
    <defs id="someDefs">
        <style id="style1">
            .blue-fill {
                fill : blue;
            }
        </style>
    </defs>
    <style id="style2">
        .red-stroke {
            stroke : red;
            stroke-width : 12
        }
    </style>
    <circle cx="50" cy="50" r="40" class="blue-fill red-stroke" />
</svg>

【问题讨论】：

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

标签： svg

【解决方案1】：

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

正如 Paul LeBeau 所说。

在阅读了this article about style on MDN 之后，它显示了一个简单地在SVG 根下的样式示例，我更相信将<style> 放在那里而不是<defs> 下是正确的。

另外，由于<defs> 标记确实是用于应呈现的可重用图形元素，而<style> 不是可呈现元素，因此保留它是没有意义的。

【讨论】：

【解决方案2】：

<defs> 中定义的图形元素不会直接呈现，只会使用use 呈现。因此，如果定义了图形对象供以后使用，则使用<defs> 始终是一个好习惯。它还增加了代码的可读性。

More Information

【讨论】：

是的，但是<style> 不是可以呈现的图形元素，而是某些图形元素可能使用的 CSS 声明。所以我想剩下的唯一问题是可读性。 Here 样式是直接在<svg> 标签下定义的，所以我想我会按照这个例子，不会使用<defs> 代替<style>
这是，而不是