我试图用d3.js为svg:image(SVG中嵌入的图像)制作圆角。我找不到如何正确地设计图像的样式,因为根据W3C规范,我应该能够使用CSS,但相邻的边框和圆角都不适合我。
先谢谢你。
vis.append("svg:image")
.attr("width", width/3)
.attr("height", height-10)
.attr("y", 5)
.attr("x", 5)
.attr("style", "border:1px solid black;border-radius: 15px;")
.attr("xlink:href",
"http://www.acuteaday.com/blog/wp-content/uploads/2011/03/koala-australia-big.jpg");
编辑:
已测试的浏览器:火狐浏览器、Chrome浏览器
4条答案
按热度按时间yh2wf1be1#
'border-radius'不适用于svg:image元素(无论如何)。解决方法是创建一个圆角矩形,并使用clip-path。
An example。
相关部分来源:
也可以创建多个rect元素,而不是使用
<use>
。wooyq4lh2#
另一个简单的选择:
将html
<img>
标记 Package 在<foreignObject>
标记中。这允许您使用正常的html样式:w8rqjzmb3#
现在还有另一种更简洁的方法,那就是使用inset clip-path。
hjqgdpho4#
对于那些只对制作圆形头像感兴趣的人,这里有一个使用d3 v4的例子。注意,当图像位于(0,0)时,需要应用剪切,所以需要平移()图像到想要的位置。