（嵌入和）通过 D3 和/或 javascript 引用外部 SVG

Question

我有一个 .svg 文件，想将它嵌入到我的 d3-graphic 的 svg 结构中。

我还需要通过某些 g 元素的 id 引用附加到 g 元素的所有路径/多边形。

我尝试了不同的方法来嵌入和引用 svg (g's)，但由于某些原因它不起作用：

(1) 第一次尝试

// Firefox displays my svg but when i open it with Chrome the svg     
//is not displayed (just default placeholder icon)
// I can't reference the svg-g id's with d3.select functions. 
main_chart_svg
        .append("svg:image")
        .attr("xlink:href", "mySVGpicture.svg")
        .attr("x", "50")
        .attr("y", "50")
        .attr("width", "500")
        .attr("height", "500");  

main_chart_svg.select("#anIdWhichIsInTheSvgFile").remove(); //// This doesn't work

(2) 第二次尝试

// This displays the svg but -not- inside my main-chart-svg. I want to keep the graphic   
//things seperate to html-stuff.
d3.xml("mySVGpicture.svg", "image/svg+xml", function(xml) {
        document.body.appendChild(xml.documentElement);
    });
//----------or----------//
    d3.select("body")
        .append("object")
        .attr("data", "mySVGpicture.svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("type", "image/svg+xml");

d3.select("#anIdThatIsInTheSvgFile").remove(); //does not work.

(3) svg 文件看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px"
     height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <g id="anIdWhichIsInTheSvgFile">
        <g id="DE">
            <path fill="#FEDCBD" d="M215.958,160.554c0,0-0.082, ... ,1.145
                l0.865,0.656L215.958,160.554z"/>
            <path fill="#FEDCBD" d="M208.682,155.88l1.246,1.031c0,0,0.191,0.283, ... ,0.572L208.682,155.88z"/>
            <polygon fill="#FEDCBD" points="190.76,153.007 190.678, ... ,153.938 
                191.427,152.906"/>
            <polygon fill="#FEDCBD" points="170.088,151.015 169.888,150.067 169.125,150.075 168.846,150.836 169.521,151.588"/>
            <polygon fill="#FEDCBD" points="168.953,152.067 168.188,151.505 168.674,152.639"/>
            <polygon fill="#FEDCBD" points="170.105,153.099 170.666,152.052 170.002,152.248"/>
    </g>
    <g id="anIdThatIsInTheSvgFile">
    ...
    </g>
</svg>

Answer 1

有一个更好的解决方案。

我没有意识到d3.xml() 函数将读入的 xml 文件作为document fragment 返回（而不是将其转换为 JSON）。换句话说，它返回一个现成的 DOM 树，可以将它插入到主文档的 DOM 中，无论您需要什么。

知道（并且知道独立的 SVG 文件也是 XML 文件），这可能是向网页添加外部 SVG 内容的最可靠方法：

d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", 
        function(error, documentFragment) {

    if (error) {console.log(error); return;}

    var svgNode = documentFragment
                .getElementsByTagName("svg")[0];
    //use plain Javascript to extract the node

    main_chart_svg.node().appendChild(svgNode);
    //d3's selection.node() returns the DOM node, so we
    //can use plain Javascript to append content

    var innerSVG = main_chart_svg.select("svg");

    innerSVG.transition().duration(1000).delay(1000)
          .select("circle")
          .attr("r", 100);

});

在这里提琴：http://jsfiddle.net/J8sp3/4/

请特别注意 (a) 我将内容添加到现有 SVG，并且 (b) 我不会删除该 SVG 的任何当前内容。

当然，您也可以将 SVG 添加到 <div> 或任何其他可以包含它的元素：http://jsfiddle.net/J8sp3/3/

此方法应适用于任何支持 SVG 的浏览器。我什至在IE8中试过，即使IE8不知道怎么画圆和矩形，DOM结构也是正确的！

@Seb，请在选择此答案作为已接受答案时取消选择上一个答案。

Answer 2

从另一个文件嵌入 SVG 内容的正确格式是使用 <use> 元素。但是，您无法访问嵌套 SVG 的 DOM 结构（即单个元素）——它们都被视为单个图像。

如果您希望能够修改外部文件描述的图形，最好将外部文件作为文本/XML 文件读取（使用 d3.text ），然后使用该 XML 文本创建通过将内容编写为容器的内部 HTML 将内容写入 DOM 中的 SVG 图形 <div>

d3.text("mySVGpicture.svg", function(error, externalSVGText) {
         if (error) {console.log(error); return;}

         chart_div.html(externalSVGText);

         svg = chart_div.select("svg");

         do_stuff();
});

你的 DOM 现在应该看起来像

body
  div.chart
     svg
       g#anIDWhichIsInTheSVGFile
         g#DE
           path
           /*etc*/
       g#anotherIDWhichIsInTheSVGFile

您现在可以正常选择元素，并设置您创建的 svg 的位置或大小或删除 g 元素或其他任何东西——它们都是 DOM 中的普通元素。确保您的“id”属性不冲突——它们对于整个页面必须是唯一的。

此处的示例，显示了使用 d3 添加到 SVG 的附加内容，以及从外部 SVG 中选择和修改元素的 d3 过渡：
http://jsfiddle.net/J8sp3/2/

警告

此答案的原始版本建议将外部 SVG 内容作为嵌套 SVG 添加到已使用 D3 创建的 SVG 中。

正如 Seb 发现的那样，此方法在最新的 Safari 和 Opera 浏览器或 Chrome 31 及更低版本上不起作用。

问题在于 webkit 浏览器实现 innerHTML 函数的方式，该函数由 d3 的 selection.html() 函数调用。具体来说，the innerHTML function isn't implemented at all on SVG elements!

最令人困惑的是该方法没有返回任何错误，并且某些版本的 Chrome 实际显示 SVG 内容而不将其添加到 DOM（就像您使用 <use xlink:href="external.svg"/> 一样）。