假设这个:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
为什么我什么都没看到？
更新的问题,基于更简单的测试用例:
我有一个网站使用<svg>脚本生成的图形.图形中的东西充满了svg图案.到现在为止还挺好.
我现在<pattern>使用Javascript 将一个元素添加到图形中已有的模式中.我可以很容易地做到这一点,利用类似的方法createElementNS,setAttribute和appendChild.
SVG模式元素如下所示:
<defs>
<pattern id="stripes" width="6" height="6" patternUnits="userSpaceOnUse">
<svg:path d="M 0 0 L 10 0 L 10 1 L 0 1 Z" fill="red" width="6" height="6" id="stripepimage"></svg:path>
</pattern>
</defs>
他们像这样使用:
<path d="..." fill="url(#stripes)" />
现在:使用Javascript,或者浏览器控制台,我可以改变<path>的fill属性使用不同的图案.这工作正常,所有的人从一开始的页面模式,但它不是为后来添加上的图案.SVG代码本身很好; 将它保存在.svg中并在同一浏览器中打开它可以完美地显示新模式.
为什么不能使用动态生成的模式？
我有一些SVG嵌入到网页中,需要复制一个特定的SVG节点(包括它的子节点),然后将其粘贴回DOM.唯一的问题是,SVG节点在粘贴后不会出现,这可能是因为它是命名空间的.
那么,如何复制和粘贴命名空间的SVG节点？我想它会是某种递归函数.
PS目前使用jQuery的clone()方法来复制SVG节点.
测试SVG:
<g>
<rect>
<text></text>
<g>
<circle>
<rect>
</g>
</g>
如何递归地将该SVG添加到DOM,记住应该使用createElementNS,因为SVG是命名空间的.