Javascript 在html页面中嵌入svg中的样式标记和xml可以吗？

我用AdobeIllustrator生成了一些SVG，并将它们嵌入到我的html页面中。据我所知，所有

style

标签必须在head中，但这些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>

.st0{
填充：无；
}
.st1{
启用背景：新建；
}
.st2{
填写：#009444；
}

svg在Firefox和Chrome中呈现良好。在IE11中，一个svg看起来比其他浏览器小，而且看起来很完美。我还没有登记Safari，因为我没有mac。我的问题是:

• 根据w3c和浏览器兼容性，在html页面中嵌入svg中的样式标记和xml可以吗

---

附言：在我的一部作品中，我发现在边缘浏览器中添加jquery

appendTo

时，内联svg存在问题。SVG设置为显示相互重叠的内联块。（中的底框）

您可以参考MDN了解这些类型的标准。如中所示，您可以使用，并且使用

---

SVG内的标记。

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

在SVG中，没有

元素，通常直接放在根元素或

子元素中

同样，您可以在HTML中嵌入整个SVG文档，包括

。因此，可以将

样式

放入HTML文档中的SVG文档中，前提是它们实际上是SVG，即它们的名称空间是

http://www.w3.org/2000/svg

---

在HTML中，

应放在

下（或

中的

），根据。

可以同时使用内联svg和css。我建议您将所有样式分组在html文档的开头，但无论如何它都是有效的html。@DavidLamponDiestre实际上SVG是从服务器端添加的。我们添加了新的图像，后端逻辑将

img

标记替换为内联svg。我还注意到

xml

标记会被浏览器自动注释掉。我认为在将svg注入html之前，应该在be中进行一些清理，以减少发送的数据，从而实现更好的场景。虽然最终的组合可能不是最好的（因为我更喜欢将所有内联样式放在一起），但使用内联svg和css是有效的w3c。如果您担心w3c，您是否使用w3c验证程序检查过您的页面？用于HTML和CSS。@ata是的，刚刚选中。我得到的唯一错误是“不允许svg标记中的文本”。在实际页面中，我很抱歉您的浏览器在svg标记中不支持svg。MDN不是寻找标准的地方。它是开发人员文档。我不是指

svg

标记中的

head

标记。我的意思是，已经在

svg

标记中的

style

标记可以在包含html文档的

body

标记中看到。据我所知，

style

正文内的标签是无效的。我已经修改了答案。通常，

style

确实被放在头下，但我找不到任何迹象表明body中的style是无效的。你能提供一个标准的参考吗？我在W3CValidator中测试过。将

样式

放入

正文

中会产生错误。我之所以记得这一点，是因为我不久前读到了关于作用域样式的文章。并且afaik元数据应该在head标记中。@user31782哦，你是对的，

应该只在head中。我已经更新了答案。请注意，预期元数据内容的

有一个。