JS 如何操作SVG的内部属性？
0
悬赏园豆：10
[已解决问题]
解决于 2016-04-07 16:27
我想通过JS来操作SVG画出来的圆动态变大变小。不知道怎么写。
最佳答案
0
1.circle.svg文件
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3.5in" height="1in"> <title>Listing 24-1 from the XML Bible</title> <circle id="circle" r="20" cx="100" cy="100" style="fill: red; stroke: blue; stroke-width: 2" /> </svg>
2.circle.html
<embed width="300" height="300" type="image/svg-xml" id="svgmapctrl" pluginspage="http://www.adobe.com/svg/viewer/install/" src="circle.svg" ></embed><br /> <input type="button" value="变大" onclick="changeR('+')" /> <input type="button" value="缩小" onclick=" changeR('-')" /> <script type="text/javascript"> var changeR = function (opration) { var svgDoc = document.getElementById("svgmapctrl").getSVGDocument(); var circle = svgDoc.getElementById("circle"); var r = parseInt(circle.getAttribute("r")); if (opration == '+' && r < 150) circle.setAttribute("r", r + 10); if (opration == '-' && r > 10) circle.setAttribute("r", r - 10); } </script>
收获园豆：10
再我发完这个问题的时候，我想到了解决办法。。现在遇到的问题是 一个SVG如何在一个页面多次使用并且同时使用。。
@皮卡丘\(≧▽≦)/:
1.多次使用，可以多次操作circle
2.同时使用？能否详细描述下
