我正在尝试使用“innerHTML”从外部文件注入(inject) SVG 渐变定义，以保持 HTML 干净。
它在 Chrome 中运行良好，但在 Safari 或 Mobile Safari 中则不行。 有什么想法或解决方法吗？
这是一个简化的示例(注入(inject)的第二个渐变，实际上是从服务器请求 html):
<html>
<body>
<svg width="0" height="0">
<defs>
<linearGradient id="grad1" x2="0" y2="1"> <stop offset="0" stop-color="#ffff00"/><stop offset="1" stop-color="#ff0000"/> </linearGradient>
</defs>
</svg>
<svg width="0" height="0" id="svg-grad"></svg>
<script>
function inject_svg() {
var gr2=document.getElementById('svg-grad');
html='<defs><linearGradient id="grad2"><stop offset="0" stop-color="#ffff00"/><stop offset="1" stop-color="#ff0000"/> </linearGradient></defs>';
gr2.innerHTML=html;
}
</script>
<svg width="200" height="200">
<rect fill="url(#grad1)" x="20" y="20" width="50" height="150"/>
<rect fill="url(#grad2)" x="100" y="20" width="50" height="150"/>
</svg>
<button onclick="inject_svg();">inject</button>
</body>
</html>
在 jsfiddle 中:http://jsfiddle.net/wPL4n/
最佳答案
它可能会在 html 命名空间而不是 SVG 命名空间中添加内容。尝试使用 DOMParser 代替，并为数据设置显式命名空间(即数据的根元素上的 xmlns="http://www.w3.org/2000/svg")。
<svg width="0" height="0" id="svg-grad"></svg>
<script>
function inject_svg() {
var gr2=document.getElementById('svg-grad');
html='<defs xmlns="http://www.w3.org/2000/svg"><linearGradient id="grad2"><stop offset="0" stop-color="#ffff00"/><stop offset="1" stop-color="#ff0000"/> </linearGradient></defs>';
var xmlDoc = new DOMParser().parseFromString(html, "text/xml");
gr2.appendChild(xmlDoc.documentElement);
}
</script>
<svg width="200" height="200">
<rect fill="url(#grad1)" x="20" y="20" width="50" height="150"/>
<rect fill="url(#grad2)" x="100" y="20" width="50" height="150"/>
</svg>
<button onclick="inject_svg();">inject</button>
关于javascript - 使用innerHTML加载svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24079659/