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

我已经用Adobe Illustrator生成了一些svgs，并将它们嵌入到我的html页面中。据我所知，所有style标签必须在头，但这些svgs有自己的style标签。以下是一个svg的示例：可以在html页面中嵌入svg中的样式标签和xml吗？

<?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中。在IE11和Edge中，其中一个svg显得比其他浏览器要小，看起来很完美。我没有在Safari中检查，因为我没有Mac。我的问题是：

根据w3c和浏览器兼容性，可以在svg中嵌入svg中的style标签和xml吗？

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

来源

2017-03-29 user31782

可以同时使用内联svg和css。我建议将所有样式分组在HTML文档的头部，但无论如何它是有效的HTML。 –

@DavidLamponDiestre其实从服务器端添加svgs。我们添加新图像，后端逻辑用内联svgs替换'img'标签。而且我还注意到浏览器会自动注释掉'xml'标签。 – user31782

我认为在将html注入svg之前，应该在BE中进行一点清理，以减少为更好的场景发送的数据。虽然最终的构图可能不是最好的（因为我更喜欢至少将所有内联样式放在一起），但有效的w3c具有内联svg和css。 –

您可以参考这些标准的MDN。正如在their SVG style page中给出的那样，您可以使用它，并且在SVG内部有<style> 标记是有效的。

来源

2017-03-29 09:01:47 John

MDN不是寻找标准的地方。这是开发者文档。 [SVG标准由W3C维护]（https://www.w3.org/TR/SVG/）。 – phihag

这不是一个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。

来源

2017-03-29 09:03:01 phihag

我并不是指'svg'标签里面的'head'标签。我的意思是已经在svg标签内的style标签可以在包含html文档的body标签中看到。而据我所知'body'中'style'标签无效。 – user31782

我已经修改了答案。通常情况下，“风格”确实处于头顶，但我无法找到任何迹象表明身体的风格是无效的。你能否提供这样说的标准的参考？ – phihag

我在w3c验证器中测试过。将'style'放在'body'里面会给出错误。我记得这一点，因为前一段时间我正在阅读有关范围的风格。 – user31782

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

回答

相关问题