13

这是一个问题：

我与 D3 一起工作。尝试将图像添加到节点。渲染文件是 svg 文件：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.2/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     version="1.1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-    background="new 0 0 400 400" xml:space="preserve"     xmlns:xml="http://www.w3.org/XML/1998/namespace">
<path fill="#5DD7FC" d="M0.5,262.094c0,0,52.172,79.049,158.323,77.241c68.433-    2.031,165.549-32.296,191.523-132.123  c0,0,27.893,4.742,47.654-16.939c-26.99,3.727-44.944-    4.743-44.944-4.743s35.346-1.017,43.137-21.908  c-20.89,9.035-46.751,1.355-46.751,1.355S337.245,90.22,262.939"/>
</svg>

所以，我正在尝试使用此代码将其连接到图像源（现在直接）：

d3GraphWidget._node.append("image")
                .attr("xlink:href", "http://localhost:13980/Areas/Widgets/Content/graphwidgetrelated/img/twittericon.svg")
                .attr("x", -8)
                .attr("y", -8)
                .attr("width", 16)
                .attr("height", 16);

但我没有看到任何渲染，只是一个“空图像图标”。直接去链接的时候，浏览器发现文件没问题。

那么，如何在 D3 中使用 svg 文件作为图像源？

感谢您的任何建议，

亚历克斯

4

3 回答 3

9

我猜你想在 svg 元素上插入 svg 元素，问题是你的代码似乎可以工作：

<svg id="svgEmbed"></svg>
<script>
d3.select("#svgEmbed").append("image")
    .attr("xlink:href","https://upload.wikimedia.org/wikipedia/commons/d/d8/Compass_card_(de).svg")
    .attr("width", 100)
    .attr("height", 100)
</script>

如果要使用d3在html元素中插入svg图片，完全一样：

<div id="htmlEmbed"></div>
<script>
d3.select("#htmlEmbed").append("img")
    .attr("src","http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg")
    .attr("width", 100)
    .attr("height", 100)
</script>

jsFiddle：http: //jsfiddle.net/wnwfn/44/

于 2013-05-09T06:24:40.543 回答
8

@ChristopherChiche 方法的问题在于无法访问 SVG 文件的 DOM，这是使用 SVG 的一个重要（如果不是主要）方面。

看看Mike Bostock 的这个例子或者这个关于 SO 的讨论。

这将是此示例的代码：

d3.xml("http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg").mimeType("image/svg+xml").get(function(error, xml) {
   if (error) throw error;
   d3.select("#svgEmbed").node().appendChild(xml.documentElement);
});
于 2016-08-08T11:51:29.513 回答
4

我无法通过@elachell 获得解决方案，但这非常有效（使用 D3 v5）：

d3.svg("file.svg").then(function(xml) {
  d3.select("#svgEmbed").node().appendChild(xml.documentElement);
});
于 2020-01-02T14:27:38.933 回答