动态添加SVG

最新推荐文章于 2024-08-28 22:04:04 发布

阳光下的海狗

最新推荐文章于 2024-08-28 22:04:04 发布

阅读量2.1k

点赞数

分类专栏：图形文章标签： SVG

本文链接：https://blog.csdn.net/yk583443123/article/details/91883754

版权

图形专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击圆、可以动态的插入一条线段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width;initial-scale=1">

</head>

<body>
   <svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet">
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
<script>
       var mysvg = document.getElementById("mysvg");
       var x1=10;
       var y1=10;
       var x2=50;
       var y2=10;
       mycircle.addEventListener('click', function(e) {
       var line= makeSVG('line', {x1: x1, y1: y1, x2:x2, y2:y2, stroke: 'black', 'stroke-width': 6, fill: 'red'});
document.getElementById('mysvg').appendChild(line);
           x1+=20;
           y1+=10;
           x2+=x1+20;
           y2=y1;
});
   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;
}