可以在 svg 中嵌入样式标签和 xml 到 html 页面中吗？答案

【问题标题】：Is it ok to have style tag and xml in svg embedded in html page?可以在 svg 中嵌入样式标签和 xml 到 html 页面中吗？
【发布时间】：2017-08-22 15:57:11
【问题描述】：

我使用 Adobe Illustrator 生成了一些 svg，并将它们内嵌在我的 html 页面中。据我所知，所有style 标签都必须在头部，但这些 svg 有自己的style 标签。以下是一个 svg 的示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" style="enable-background:new 0 0 526.6 28.3;" xml:space="preserve">
    <style type="text/css">
        .st0 {
        fill: none;
        }

        .st1 {
        enable-background: new;
        }

        .st2 {
        fill: #009444;
        }
    </style>
    <rect y="2.3" class="st0" width="526.6" height="26" />
</svg>

svg 在 Firefox 和 Chrome 中呈现良好。一个 svg 在 IE11 和 Edge 中看起来比其他浏览器更小，看起来很完美。我没有签入Safari，因为我没有mac。我的问题是：

是否可以根据 w3c 和浏览器兼容性将 svg 中的样式标签和 xml 嵌入到 html 页面中？

P.S：在我的工作中，当附加 jquery appendTo 时，我在 EDGE 浏览器中看到了内联 svg 的问题。设置为显示内联块的 svgs 相互重叠。（https://anupamkhosla.github.io/marqueedirection/中的底壳）

【问题讨论】：

内联svg和css都可以。我建议将所有样式分组在 html 文档的开头，但无论如何它都是有效的 html。
@DavidLamponDiestre 实际上 svg 是从服务器端添加的。我们添加新图像，后端逻辑将 img 标签替换为内联 svg。而且我还注意到xml 标签会被浏览器自动注释掉。
我认为在将 svg 注入 html 之前，应该在 BE 中进行一些清理，以减少发送的数据以获得更好的场景。虽然最终的组合可能不是最好的（因为我希望至少将所有内联样式放在 head 中），但具有内联 svg 和 css 的 w3c 是有效的。
如果您关心 W3C，您是否使用 W3C 验证器检查过您的页面？ validator.w3.org 用于 HTML，jigsaw.w3.org 用于 CSS。
@ata 是的，现在刚刚检查过。我得到的唯一错误是“svg 标签内的文本是不允许的”。在实际页面中，我有 Sorry your browser don't support svg 内的 svg 标签。

标签： javascript jquery html css svg

【解决方案1】：

您可以参考 MDN 了解这些标准。正如their SVG style page 中给出的那样，您可以使用并且拥有<style> 是有效的 SVG 中的标签。

【讨论】：

MDN 不是寻找标准的地方。它是开发人员文档。 SVG standard is maintained by the W3C.

【解决方案2】：

这不是 HTML 文档，而是 SVG 文档。

在 SVG 中，没有 <head> 元素，<style> 通常直接放在根元素或 <defs> 子元素中。

作为documented in the HTML standard，您可以在HTML 中嵌入整个SVG 文档，包括<style>。因此，可以将 style 放入 HTML 文档中的 SVG 文档中，前提是它们实际上是 SVG，即它们的命名空间是 http://www.w3.org/2000/svg。

在 HTML 中，<style> 应放在 <head> 下（或 <noscript> 在 <head> 中），根据 the HTML standard。

【讨论】：

我的意思不是head 标签内的svg 标签。我的意思是，已经在 svg 标签内的 style 标签在包含 html 文档的 body 标签内可见。据我所知，body 中的style 标签无效。
我已经修改了答案。通常，style 确实被放在了头下，但我找不到任何迹象表明正文中的样式无效。你能提供一个这样说的标准的参考吗？
我在 w3c 验证器中进行了测试。将style 放入body 会出现错误。我之所以记得这一点，是因为前段时间我正在阅读有关范围样式的文章。
您链接的 w3c 官方引用说：可以使用此元素的上下文：预期元数据内容的位置。并且 afaik 元数据应在 head 标签中。
@user31782 哦，你是对的，<style> 应该只在头部。我已经更新了答案。请注意where metadata content is expected 有一个definition，但不幸的是它并不太精确。