SVG 标准允许使用和引用外部 SVG 文件。

我有一个文件circle.svg，它定义了一个id为“the_circle”的圆对象。 从主 SVG 文件中，我可以使用 SVG linking 包含这个圆圈并为其设置动画。 .

我也想通过 javascript 访问同一个 circle 对象，我该怎么做？ xlink:href="url(#the_image)#the_circle" 的 javascript 等价物是什么？

使用 document.getElementById('the_image') 我只能访问 SVGImageElement 而不能访问包含的 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%" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

  <image 
    id="the_image"
    x="0" y="0"  width="100%" height="100%"
    xlink:href="circle.svg" />

  <animateTransform     
    xlink:href="url(#the_image)#the_circle"

    attributeName="transform" attributeType="XML"
    type="translate" 
    from="0" to="25"
    dur="1s" repeatCount="indefinite" 
    additive="replace" fill="freeze" />
</svg>

最佳答案

执行此操作的“正确”方法似乎实际上是使用 SVG“使用”元素，而不是图像。原因是 SVG use 元素的 DOM 接口(interface)指定了一个属性“instanceRoot”，它允许您获取与该 use 元素对应的“实例树”的根:http://www.w3.org/TR/SVG/struct.html#InterfaceSVGUseElement

因此，您最终会得到如下所示的解决方案: 圆.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="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>

不幸的是，尽管 Firefox 支持对外部文档使用 use 元素，但目前 Webkit 中存在一个错误，不允许这样做: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>

关于javascript - 访问在外部 SVG 文件中定义的 DOM 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3346106/