js 修改svg样式、动态加入DOM元素、添加事件响应函数

本文链接：https://blog.youkuaiyun.com/liyanheng123/article/details/79170625

本文探讨了如何在JavaScript中修改SVG元素的样式，并动态添加SVG元素到DOM中，同时介绍如何为SVG元素添加事件响应函数。通过示例，解释了在DOM操作中可能遇到的问题，如SVG元素未被正确识别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<html>
<head>
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink=http://www.w3.org/1999/xlink  
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"  
a3:scriptImplementation="Adobe" width="1000" height="323">  
<script type="text/ecmascript" a3:scriptImplementation="Adobe">  
    <![CDATA[ 
        function changeColor(evt) { 
            var rect = evt.target; 
            rect.setAttributeNS(null, "fill", "blue") 
        }
        function changeColor2(evt) { 
            var rect = evt.target; 
            rect.setAttributeNS(null, "fill", "white") 
        }
    ]]>
</script> 



<!-- <image x="0" y="0" width="1000" height="323" xlink:href="D:\backup\airport1.jpg" fill="none" stroke="#0000FF" /> -->

<path id="Airport" d="M45 51L169 45L169 50L440 42L439 33L459 32L460 42L729 38L728 33L898 33L900 91L927 92L943 180L943 195L865 249L851 221L843 222L719 223L674 157L655 158L591 203L469 203L469 199L314 198L293 283L281 279L271 298L263 301L179 307L128 251L189 249L187 167L101 169L47 114C47 114 46 51 45 51Z" fill="white" fill-opacity="0.5" stroke="#0000FF" onclick= "changeColor(evt)"/>

<text id="text" x="422" y="115" xml:space="preserve" font-family="微软雅黑" font-size="12" fill="none" fill-opacity="0" stroke="#0000FF"> AIRPORT</text>  

<path id="red01" d="M191 38L189 91L372 85L368 24C368 24 193 40 191 38Z" fill="white" stroke="#0000FF" stroke-opacity="1" fill-opacity="0.5" onmouseover= "changeColor(evt)" onmouseout = "changeColor2(evt)" />


<path d="M493 20L499 80L695 78L702 10C702 10 494 22 493 20Z" fill="white" stroke="#0000FF" stroke-opacity="1" fill-opacity="0.5" onmouseover= "changeColor(evt)" onmouseout = "changeColor2(evt)" />

<text x="243" y="62" xml:space="preserve" font-family="微软雅黑" font-size="12" fill="none" fill-opacity="0" stroke="#0000FF" baseline-shift="baseline">red01</text>

<text x="588" y="62" xml:space="preserve" font-family="微软雅黑" font-size="12" fill="none" fill-opacity="0" stroke="#0000FF" baseline-shift="baseline">red02</text> 

</svg>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#red01').attr("fill", "red");

        var $circle = createSvg('circle', {    
                    'cx': '50',    
                    'cy': '50',    
                    'r': '20',    
            }).appendTo('svg');

        var $text2= createSvg('text',{
                    'x':'488',
                    'y':'162',
                    'font-family':'微软雅黑',
                    'font-size':'12'
            }).appendTo('svg').html("hh2");

        //创建svg相关元素    
        function createSvg(tag, attr) {
       //命名空间
        var SVG_NS = "http://www.w3.org/2000/svg";
        var XLINK_NS = "http://www.w3.org/1999/xlink";
        if(!document.createElementNS) return;//防止IE8报错    
           var $svg = $(document.createElementNS(SVG_NS, tag));    
           for(var key in attr) {  
               switch(key) {  
                   case 'xlink:href'://文本路径添加属性特有  
                       $svg[0].setAttributeNS(XLINK_NS, key, attr[key]);   
                   break;  
                   default:  
                   $svg.attr(key, attr[key]);    
               }  
           }    
          return $svg;    
       };   
    })
</script>
</body>
</html>