（嵌入和）通过D3和/或javascript来引用外部SVG [英] (Embed and) Refer to an external SVG via D3 and/or javascript

问题描述

我有一个.svg文件，并希望嵌入到我的d3图形的svg结构中。

I have an .svg file and want to embed it in the svg strucure of my d3-graphic.

我还需要引用所有路径/多边形

I also need to reference all paths/polygons attached to g-elements via an id of certain g elements.

我尝试了不同的方法来嵌入和引用svg（g's），但是由于某些原因它没有工作：

I tried different ways to to embed and reference the svg (g's), but it didn't work for some reasons:

（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文件看起来像这样：

(3) The svg-file looks something like that:

<?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>

推荐答案

我没有意识到 d3.xml（） 函数将读入的xml文件作为文档片段（与将其转换为JSON相反）。换句话说，它返回一个现成的DOM树，可以插入到主文档的DOM中，无论你需要什么。

I hadn't realized that the d3.xml() function returns a read-in xml file as a document fragment (as opposed to converting it to JSON). In other words, it returns a ready-made DOM tree that can be inserted within you main document's DOM wherever you need it.

知道这一点SVG文件也是XML文件），这可能是最可靠的方法来添加外部SVG内容到您的网页：

Knowing that (and knowing that stand-alone SVG files are also XML files), this is likely the most reliable approach for adding external SVG content to your webpage:

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的当前内容。

Notice in particular that (a) I am adding the content to an existing SVG, and (b) I am not deleting any of that SVG's current content.

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

Of course, you can also add the SVG to a <div> or any other element that can contain it: http://jsfiddle.net/J8sp3/3/

此方法应在支持SVG的任何浏览器中工作。我甚至尝试它在IE8，并且DOM结构是正确的，即使IE8不知道如何绘制圆形和矩形！

This method should work in any browser that supports SVG. I even tried it in IE8, and the DOM structure is correct even if IE8 doesn't know how to draw circles and rectangles!

@Seb，请取消选择以前的答案选择这一个作为接受的答案。

@Seb, please unselect the previous answer at pick this one as the accepted answer.

这篇关于（嵌入和）通过D3和/或javascript来引用外部SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！