javascript d3 附加带有 svg 扩展名的图像
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15229094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3 append an image with svg extension
提问by Emilio
I'm trying to add an svg image with '.svg' extension to my chart (another svg image created with d3).
我正在尝试将带有“.svg”扩展名的 svg 图像添加到我的图表(另一个使用 d3 创建的 svg 图像)。
This is the code:
这是代码:
d3.select("#chart1 svg")
.append("svg:image")
.attr("xlink:href", "img/icons/sun.svg")
.attr("width", 40)
.attr("height", 40)
.attr("x", 228)
.attr("y",53);
As you can see I'm setting "xlink:href" attribute, but d3 changes this to href in the browser:
如您所见,我正在设置“xlink:href”属性,但 d3 在浏览器中将其更改为 href:
<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>
In fact, this code works perfectly if I use png extension. Any idea?
事实上,如果我使用 png 扩展名,这段代码可以完美运行。任何的想法?
回答by sangil
The code should work as is - here you can see an example of attaching an .svg file to d3:
代码应该按原样工作 - 在这里您可以看到将 .svg 文件附加到 d3 的示例:
Don't forget that it's possible the picture is actually there but you just can't see it- you should inspect the page using the browser developer tools to see whether the picture has been placed out of the view area (due to your x/y values, for example).
不要忘记图片可能确实存在,但您只是看不到它 - 您应该使用浏览器开发人员工具检查页面,以查看图片是否已放置在视图区域之外(由于您的 x/ y 值,例如)。
more info on #chart1
would help in this case.
#chart1
在这种情况下,更多信息将有所帮助。