如何用js动态插入svg？如何在svg中在插入Dom元素

最新推荐文章于 2024-05-14 10:55:03 发布

yanyang1116

最新推荐文章于 2024-05-14 10:55:03 发布

阅读量1.1w

点赞数 1

分类专栏： javascript svg 文章标签： svg javascript

javascript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

svg

3 篇文章 0 订阅

订阅专栏

如何用js动态插入svg？如何在svg中在插入Dom元素?

最近遇到了这个问题，于是好好研究了一番。有这么一篇文章，可以关注。解释的很清楚。

http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element

粘出里面的关键代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
    <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
    <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.οnmοusedοwn= function() {
            alert('hello');
        };
    </script>
</body></html>

<script type="text/javascript"><![CDATA[
    function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

    document.getElementById('s').appendChild(parseSVG(
        '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
    ));
]]></script>

大致意思是，svg是xml格式的语言，就算在dom里看上去已经加上了，但是还是不能被识别出来的。

只能曲线救国。

yanyang1116

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用js动态插入svg？如何在svg中在插入Dom元素

如何用js动态插入svg？如何在svg中在插入Dom元素?最近遇到了这个问题，于是好好研究了一番。有这么一篇文章，可以关注。解释的很清楚。http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element粘出里面的关键代码：
复制链接

扫一扫