访问在外部SVG文件中定义的DOM对象

看起来这样做的“正确”方法实际上是使用SVG“使用”元素,而不是图像。原因是svg use元素的dom接口指定了一个属性“instance root”,它允许您获取与该use元素对应的“instance tree”的根: http://www.w3.org/TR/SVG/struct.html#InterfaceSVGUseElement

因此,您最终得到的解决方案如下所示: 循环:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <circle r="1" fill="blue" stroke="none" id="the_circle"/>
</svg>

使用circle.svg的svg根节点的文档:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <use xlink:href="circle.svg#the_svg"/>
</svg>

不幸的是,虽然火狐支持在外部文档中使用use元素,但是WebKit中目前有一个bug,它不允许这样做: https://bugs.webkit.org/show_bug.cgi?id=12499

另外,firefox似乎没有为use元素实现instanceroot属性。

因此,您似乎需要绕过当前SVG实现的局限性。我建议您这样做的方法是使用xmlhttpRequest下载要链接的文档,并将下载文档的DOM导入宿主文档的DOM。以下代码实现了这一点,并在firefox、opera和chromium中工作:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <script>
    function fetchXML  (url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function (evt) {
        //Do not explicitly handle errors, those should be
        //visible via console output in the browser.
        if (xhr.readyState === 4) {
            callback(xhr.responseXML);
        }
        };
        xhr.send(null);
    };

    //fetch the document
    fetchXML("http://localhost:8082/tmp/circle.svg",function(newSVGDoc){
        //import it into the current DOM
        var n = document.importNode(newSVGDoc.documentElement,true);
        document.documentElement.appendChild(n);

        var circle = document.getElementById("the_circle"); //now you have the circle
    }) 
    </script>
</svg>

您可以更轻松地访问必要的元素:

document.getelementbyid('the_image').contentdocument.getelementbyid('the_circle')
< /代码> 

请参阅This imagefor reference(taked ondev.opera.com)

见 this image 供参考(在 dev.opera.com )

要用jquery/coffeescript中的代码补充@echo flow的优秀解决方案:

  $.get '/assets/hexagon.svg', (svgFileData)->
    svgTag = svgFileData.documentElement
    $('body').append(svgTag)
    circle = $('#the_circle')

下面是使用react和es6时解决这个问题的方法。用途:

<SvgImage url='pathToImage.svg'></SvgImage>

https://gist.github.com/mikkel/8b79a713ff06bbec379d