首页 新闻 搜索 专区 学院

JS 如何操作SVG的内部属性?

0
悬赏园豆:10 [已解决问题] 解决于 2016-04-07 16:27

我想通过JS来操作SVG画出来的圆动态变大变小。不知道怎么写。

皮卡丘\(≧▽≦)/的主页 皮卡丘\(≧▽≦)/ | 初学一级 | 园豆:184
提问于:2016-04-07 13:02
< >
分享
最佳答案
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('+')" />&nbsp;&nbsp;&nbsp;&nbsp;<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
jello chen | 大侠五级 |园豆:7096 | 2016-04-07 14:48

再我发完这个问题的时候,我想到了解决办法。。现在遇到的问题是 一个SVG如何在一个页面多次使用并且同时使用。。

皮卡丘\(≧▽≦)/ | 园豆:184 (初学一级) | 2016-04-07 16:27

@皮卡丘\(≧▽≦)/: 

1.多次使用,可以多次操作circle

2.同时使用?能否详细描述下

jello chen | 园豆:7096 (大侠五级) | 2016-04-07 17:01
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册