Javascript 如何访问svg:image'；当图像是外部的并加载到svg中时：g_Javascript_Svg_D3.js

Javascript 如何访问svg:image'；当图像是外部的并加载到svg中时：g

javascript svg d3.js

Javascript 如何访问svg:image'；当图像是外部的并加载到svg中时：g,javascript,svg,d3.js,Javascript,Svg,D3.js,我正在将circle.svg加载到svg的组中，并希望访问circle的元素（减号或svgbar）。但是circle.svg中的任何内容都显示为null或未定义我尝试将其作为对象加载，但它甚至没有加载图像。我尝试搜索contentDocument，但contentDocument未定义任何帮助都将不胜感激 circle.svg的内容： <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W

我正在将circle.svg加载到svg的组中，并希望访问circle的元素（减号或svgbar）。但是circle.svg中的任何内容都显示为null或未定义

我尝试将其作为对象加载，但它甚至没有加载图像。我尝试搜索contentDocument，但contentDocument未定义

任何帮助都将不胜感激

circle.svg的内容：

<?xml version="1.0" encoding="utf-8"?>    
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="minus" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" >
<circle id="svgbar" cx="16" cy="16" r="16" />
<rect id="iline" x="8" y="14" fill="#F9F9F9" width="16" height="4" />
</svg>

html:


如何访问外部加载的svg元素
var vis=d3.select（“body”）.append（“svg”）.attr（“id”、“svgObj”）；
var grp=vis.append（“g”）.attr（“id”、“grp”）；
/*var img=grp.append（“对象”）
.attr（“类型”、“图像/svg+xml”）
.attr（“数据”、“imgs/nav/circle.svg”）*/
var img=grp.append（“图像”）
.attr（“id”、“崩溃”）
.attr（“xlink:href”、“imgs/nav/circle.svg”）；
仪表属性（“高度”，20）
.attr（“宽度”，20）
.on（“鼠标悬停”，函数（）{
console.log（“overing…”）；
} );
var befSvgObj=document.getElementById（'svgObj'）；
console.log（“befSvgObj:+befSvgObj”）；
//等待所有资源加载完毕
window.addEventListener（“加载”，findSVGElements，false）；
函数findSVGElements（）{
var contDoc=befSvgObj.contentDocument；
var svgObj=document.getElementById（'svgObj'）；
var gObj=document.getElementById（'grp'）；
var cObj=document.getElementById（'collapse'）；
var svgBar=document.getElementById（'svgBar'）；
var减号=document.getElementById（'减号'）；//null
//var minus2=cObj.contentDocument.getElementById（'减号'）；
//无法调用未定义的方法“getElementById”
console.log（“svgObj:+svgObj”）；
控制台日志（“gObj:+gObj”）；
console.log（“cObj:+cObj”）；
log（“减号：“+减号”）；
console.log（“svgObj.contentDocument:+svgObj.contentDocument”）；
console.log（“gObj.contentDocument:+gObj.contentDocument”）；
console.log（“cObj.contentDocument:+cObj.contentDocument”）；
console.log（“contDoc:+contDoc”）；
日志（“svgBar:+svgBar”）；
}

如果您将外部SVG作为图像嵌入，您只能得到图像，您不能再修改它，就像修改PNG或JPEG图像一样

如果您需要访问或修改外部SVG的内容，.

谢谢，我现在可以在“我的元素调试”中看到它，但仍然无法使用document.getElementById或contentDocument.getElementById访问SVG元素。您是否仍在窗口加载事件中调用

findSVGElements

方法？因为您必须等到

d3.xml

触发其异步回调方法之后。这是我能想到的

document.getElementById（）

失败的唯一原因。（好吧，插入的内容和文档的其余部分之间的

id

值之间存在冲突，但您的示例中似乎有唯一的值。）

contentDocument

将失败，因为这不是嵌入对象，没有内容文档：请参阅，谢谢！这是其中的一部分。我现在能够检索svg元素“减号”，但仍然不能检索其内容“svgbar”。请看，由于跨源访问错误，bin无法工作，但我很确定问题是一个简单的输入错误：“svgBar”vs“svgBar”。你太棒了！我很尴尬：）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>How to access externally loaded svg elements</title>

        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>

    <body>

        <script type="text/javascript">

            var vis = d3.select( "body" ).append( "svg" ).attr( "id", "svgObj" );
            var grp = vis.append( "g" ).attr( "id", "grp" );

            /*var img = grp.append( "object" )
                    .attr( "type", "image/svg+xml" )
                    .attr( "data", "imgs/nav/circle.svg" );*/

            var img = grp.append( "image" )
                    .attr( "id", "collapse" )
                    .attr( "xlink:href", "imgs/nav/circle.svg" );

                    img.attr( "height", 20 )
                    .attr( "width", 20 )
                    .on( "mouseover", function() {

                        console.log( "overing..." );
                    } );


            var befSvgObj = document.getElementById('svgObj');
            console.log( "befSvgObj: " + befSvgObj );

            // wait until all the resources are loaded
            window.addEventListener( "load", findSVGElements, false);           

            function findSVGElements()  {

                var contDoc = befSvgObj.contentDocument;

                var svgObj = document.getElementById('svgObj');
                var gObj = document.getElementById( 'grp' );
                var cObj = document.getElementById( 'collapse' );
                            var svgBar = document.getElementById( 'svgBar' );
                var minus = document.getElementById('minus'); // null
                //var minus2 = cObj.contentDocument.getElementById( 'minus' );
                 // Cannot call method 'getElementById' of undefined

                console.log( "svgObj: " + svgObj );
                console.log( "gObj: " + gObj );
                console.log( "cObj: " + cObj );
                console.log( "minus: " + minus );

                console.log( "svgObj.contentDocument: " + svgObj.contentDocument );
                console.log( "gObj.contentDocument: " + gObj.contentDocument );
                console.log( "cObj.contentDocument: " + cObj.contentDocument );
                console.log( "contDoc: " + contDoc );
                            console.log( "svgBar: " + svgBar );

            }


        </script>

    </body>
</html>