如何在javascript中嵌入SVG样式? [英] How to embed SVG styling with javascript?
问题描述
我正在尝试将CSS样式嵌入SVG内容(例如在此示例中)使用JavaScript. SVG本身嵌入到HTML5文件中.样式嵌入的目的是将SVG在线创建的内容保存到独立的* .svg文件中.
I'm trying to embed a CSS styling into a SVG content (like in this example) using JavaScript. The SVG itself is embedded into a HTML5 file. The purpose of style embedding is to save a SVG online created content into a standalone *.svg file.
这是第一个经过测试的内容: http://jsfiddle.net/3L8a2oxy/
Here is the first tested content: 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>
在该示例中，样式无效:
In that example styling doesn't work:
and Firefox(v 34.0.5)给出错误:
and Firefox (v 34.0.5) gives the error:
期望选择器.由于选择器错误，Rulset会忽略.
Selector expected. Rulset ignore due to bad selector.
但是，如果使用此代码制作一个单独的html文件，将其保存，然后在浏览器中重新打开，则可以看到样式，即由浏览器正确解析.
However, if you make a separate html file with this code, save it, and reopen in a browser, the styling can be seen, i.e. it is parsed by browser correctly.
如果将样式代码更改为:
If one changes the style code as to:
var node = document.createTextNode('circle { fill: red; }');
然后，样式可以在网上正常运行而不会出错( http://jsfiddle.net/8grf344g/).但这不是规范告诉我们要做的.我可以将SVG零件保存到一个文件中，然后在浏览器中打开它，它的样式似乎正确，但是我不确定它在其他应用程序中的行为.
then styling works online with no errors (http://jsfiddle.net/8grf344g/). But it's not what the specifications told us to do. I can save the SVG part into a file in then open it in the browser, and it appears to be styled correctly, but I'm not sure how it will behave in other applications.
因此，问题出在主题上.
So, the question is in the subject.
PS.还有一个我尚未找到任何解决方案的问题.如果您尝试将样式数据与样式标签合并，如下所示:
PS. There is another issue for which I haven't found any solution yet. If you try to merge style data with style tag as follows:
var node = document.createTextNode('<style type=\'text/css\'><![CDATA[circle { fill: red; }]]></style>');
defs.appendChild(node);
然后进入已编码的文档:
then to goes into the document encoded:
<style type='text/css'><![CDATA[circle { fill: red; }]]></style>
我知道html元素的内部内容会发生这种情况，但是为什么在上述第一种情况下不会发生这种情况?
I know it happens for the inner content of html elements, but why it doesn't happen in the above first case?
PS 由于社区提供的对该主题的答案指向了正确的方向，但没有给出有效的示例，因此我将其放在jsfiddle中(
P.S. Since the answers to the subject kindly provided by the community point to a right direction, but don't give a working example, I put one to jsfiddle (http://jsfiddle.net/26wfwa12/1/). Feel free to use it and comment.
推荐答案
您有两个主要错误.首先，您需要在SVG命名空间中创建样式元素，即
You've two main bugs. Firstly, you need to create the style element in the SVG namespace i.e.
var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
第二，您不能在html中使用<