请问如何获取并操作html中用<embed>标签嵌入的svg元素？

Question

1.如题，本Noob遇到一个需要使用svg的h5项目，因为svg本身代码量太大，
为了精简就用了embed标签把svg嵌入我需要用到它的html页面中去了。
现在需要获取到svg中的path进行样式操作，请问如何实现？

附：在chrome浏览器开发者工具的Console中可以用选择器获得这样的输出，
不知道这是不是浏览器渲染后的结果，但问题就是不知道如何获取里面的path元素然后进行操作.

Answer 1

你好，我遇到的同样的问题，请问您解决了吗？

Answer 2

调查了一下，需要注意的地方有两处：1.有跨越问题 2.取得时机问题
下面的代码，在localhost环境下运行成功。

<embed type="image/svg+xml"  src="test.svg"/>
<script>
window.onload = function() {
    var embed = document.querySelector('embed')
    var d = embed.getSVGDocument()
    var svg = d.querySelector('svg')
    console.log(svg)
}
</script>

Answer 3

直接ajax请求 拿返回值
https://stackoverflow.com/questions/45240363/can-i-use-javascript-fetch-to-insert-an-inline-svg-in-the-dom

Answer 4

如果是动态加载的svg可以这样写

<div id='svgDiv'></div>
function initSvg(){
    $.ajax({
        url:""
        ,success:function(res){
             var embed = ducument.createElement("embed");
             embed.setAttribute("style","width:500px;height:500px;border:1px solid black");
             embed.setAttribute("type","image/svg+xml");
             embed.setAttrubute("src",res.data);
             document.getElementById("svgDiv").appendChild(embed);
             //添加加载完成监听事件
             embed.addEventListener("load",function(){
                var svgDocument = embed.getSVGDocument();
                var mySvg = svgDocument.querySelector("svg");
                console.log("svg子节点g：",$(mySvg).find("g"));
             })
        }
    })
}