HTML中如何修改SVG的内部标签

SVG图片处理与状态控制

最新推荐文章于 2025-10-21 16:26:22 发布

原创最新推荐文章于 2025-10-21 16:26:22 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

一、通过iframe、object、embed展示SVG图片

<embed id="svgImg" src="http://。。。。/power/upload/19943b67-0f49-4c5f-83f0-566d982f1aab.svg"></embed>

            var svgImg = document.getElementById("svgImg").getSVGDocument();
            for (var i = 0; i < vm.deviceDataYx.length; i++) {
                var data = vm.deviceDataYx[i];
                var deviceCodeG = svgImg.getElementById(data.deviceCode);
                // console.log("did="+data.deviceCode+"===="+deviceCodeG);
                if (isNull(deviceCodeG)) continue;
                var lines = deviceCodeG.getElementsByTagName("line");
                var kinfe = getElement(lines, "kinfe");
                if (data.value==1.0) {//1.0合闸
                    kinfe.setAttribute("stroke", "#ff5151");
                    var x2 = $api.attr(kinfe,'x2');
                    $api.attr(kinfe,'x1',x2);
                }else{
                    kinfe.setAttribute("stroke", "#67c23a");
                }
            }