如何使用javascript嵌入SVG样式？
Dmi*_*try 1 html javascript css svg
我正在尝试使用JavaScript 将CSS样式嵌入到SVG内容中(如本例所示).SVG本身嵌入到HTML5文件中.样式嵌入的目的是将SVG在线创建的内容保存到独立的*.svg文件中.
这是第一个测试内容:http://jsfiddle.net/3L8a2oxy/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG embedded styling</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<circle cx="50" cy="50" r="25"/>
</svg>
<script>
var svg = document.getElementsByTagName("svg")[0];
var defs = svg.getElementsByTagName('defs')[0];
var style = document.createElement('style');
defs.appendChild(style);
style.setAttribute('type', 'text/css');
var node = document.createTextNode('<![CDATA[circle { fill: red; }]]>');
style.appendChild(node);
</script>
</body>
</html>
在该示例中,样式不起作用:
和Firefox(v 34.0.5)给出错误:
选择器预期.由于选择器错误,Rulset忽略.
但是,如果您使用此代码创建单独的html文件,保存并在浏览器中重新打开,则可以看到样式,即浏览器正确解析它.
如果更改样式代码,则:
var node = document.createTextNode('circle { fill: red; }');
然后样式在线工作没有错误(http://jsfiddle.net/8grf344g/).但这并不是规范告诉我们要做的事情.我可以将SVG部分保存到文件中,然后在浏览器中打开它,它看起来样式正确,但我不确定它在其他应用程序中的表现.
所以,问题在于主题.
PS.还有一个问题,我还没有找到任何解决方案.如果您尝试将样式数据与样式标记合并,如下所示:
var node = document.createTextNode('<style type=\'text/css\'><![CDATA[circle { fill: red; }]]></style>');
defs.appendChild(node);
然后进入编码的文件:
<style type='text/css'><![CDATA[circle { fill: red; }]]></style>
我知道它发生在html元素的内部内容中,但为什么它不会发生在上面的第一种情况？
PS由于社区友好提供的主题答案指向一个正确的方向,但没有给出一个工作的例子,我把一个给jsfiddle(http://jsfiddle.net/26wfwa12/1/).随意使用它并发表评论.
你有两个主要的错误.首先,您需要在SVG名称空间中创建样式元素,即
var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
其次你不能<![CDATA[在html中使用它只是你想要的xhtml
var node = document.createTextNode('circle { fill: red; }');
最后(这个位是可选的),如果你愿意,可以省略text/css属性.所有这些都给你这个
规范当然不会告诉你使用<![CDATA[html,但他们确实告诉你使用它与xhtml和xml和SVG一次只是一个xml语言.如果您打算拥有独立的svg文件(将作为image/svg + xml提供),那么您可能需要将其放<![CDATA[回去.