使用javascript动态创建SVG对象的问题

发表于 JS 分类，标签:
23 06月 2015
0

使用javascript动态创建SVG对象的问题,平时的一些研究，有时也会颇费功夫.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>


<svg id="s" xmlns="http://www.w3.org/2000/svg"/>

<script type="text/javascript" src="scripts/jQuery.v1.11.1.min.js"></script>


<script type="text/javascript">


function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}

var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.onmousedown= function() {
alert('hello');
};
</script>
<script type="text/javascript">


</script>
<script type="text/javascript">
// 强力推荐这种方法
// Creates svg element, returned as jQuery object
function $s(elem) {
return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}

var $svg = $("#s");
var $circle = $s("circle").attr({
cx:"80",
cy:"80",
r:"10" ,
fill:"green"
});
$svg.append($circle);
</script>
</body>
</html>

0 篇评论

发表我的评论