在html页面中嵌入svg中的样式标记和xml是否可以？
[英]Is it ok to have style tag and xml in svg embedded in html page?
问题描述
I have generated some svgs with Adobe Illustrator and have embedded them inline in my html page. 
我已经使用Adobe Illustrator生成了一些svgs，并将它们嵌入到我的html页面中。 As far as I know all style tags must be in head but these svgs have their own style tags. 据我所知，所有style标签都必须在头部，但这些svgs有自己的style标签。 Following is the example of one svg: 以下是一个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>
The svg renders well in Firefox and Chrome. svg在Firefox和Chrome中表现良好。 One svg appeared smaller than in other browsers in IE11 and Edge it appeared perfect. 一个svg看起来比IE11和Edge中的其他浏览器小，它看起来很完美。 I haven't checked in Safari as I don't have mac. 我没有检查Safari，因为我没有mac。 My question is: 我的问题是：
- Is it ok to have style tag and xml in svg embedded in html page as per w3c and browser compatibility? 是否可以根据w3c和浏览器兼容性在html页面中嵌入svg中的样式标记和xml？
PS: In a work of mine I saw problems with inline svg in EDGE browser when appended with jquery appendTo . PS：在我的作品中，当我附加了jquery appendTo时，我在EDGE浏览器中看到了内联svg的问题。 The svgs, set to display inline-block overlapped each other. 设置为显示内联块的svgs相互重叠。 (The bottom case in https://anupamkhosla.github.io/marqueedirection/ ) （ https://anupamkhosla.github.io/marqueedirection/中的底部案例）
2 个解决方案
解决方案1
0 2017-03-29 09:01:47
You can refer MDN for these kinds of standards. 您可以参考MDN来获取这些标准。 As it is given in their SVG style page , you can use and it is valid to have <style> tag inside SVG. 正如它在SVG样式页面中给出的那样，您可以使用，并且在SVG中包含<style>标签是有效的。
解决方案2
0 2017-03-29 09:03:01
This is not an HTML document, but an SVG document. 这不是HTML文档，而是SVG文档。
In SVG, there is no <head> element and <style> is commonly placed directly in the root elements or in a <defs> subelement. 在SVG中，没有<head>元素， <style>通常直接放在根元素或<defs>子元素中。
As documented in the HTML standard , you can embed whole SVG documents in HTML, including <style> . 如HTML标准中所述 ，您可以将整个SVG文档嵌入HTML中，包括<style> 。 Therefore, it is ok to place style into SVG documents within HTML ones , provided they are actually SVG, ie their namespace is http://www.w3.org/2000/svg . 因此， 可以将style放入HTML格式的SVG文档中 ，前提是它们实际上是SVG，即它们的名称空间是http://www.w3.org/2000/svg 。
In HTML, <style> should be put under <head> (or <noscript> in <head> ), per the HTML standard . 在HTML中， <style>应按照HTML标准放在<head> （或<head> <noscript> <head> ）下。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.