(嵌入和)通过D3和/或javascript引用外部SVG
(嵌入和)通过D3和/或javascript引用外部SVG
提问于 2014-01-19 04:36:09
我有一个.svg文件，想把它嵌入到我的d3图形的svg结构中。
我还需要引用通过某个g元素的id附加到g元素的所有路径/多边形。
我尝试了不同的方法来嵌入和引用svg (G)，但由于某些原因，它不起作用：
(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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-23 01:37:20
有一个更好的解决方案。
我还没有意识到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，请在pick this one as the accepted中取消选择之前的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21209549
复制相关文章
相似问题