为svg:image设置圆角 [英] Setting rounded corners for svg:image
本文介绍了为svg:image设置圆角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图为s svg:image(嵌入在SVG中的图像)与d3.js做圆角。我不知道如何正确的风格的图像,因为根据W3C规范,我应该能够使用CSS,但更严格的边框或圆角边缘为我工作。
I was trying to make rounded corners for s svg:image (image embedded in SVG) with d3.js. I can't find out how to properly style the image, because according to W3C spec I should be able to use CSS, but neighter border nor rounded edges work for me.
提前感谢。
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
推荐答案
'border-radius'不适用于svg:image元素。解决方法是创建一个带圆角的矩形,并使用剪切路径。
'border-radius' doesn't apply to svg:image elements (yet anyway). A workaround would be to create a rect with rounded corners, and use a clip-path.
示例。
源的相关部分:
<defs>
<rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
<use xlink:href="#rect" stroke-width="2" stroke="black"/>
<image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>
也可以创建多个rect元素,而不是使用< use&
。
It's also possible to create several rect elements instead of using <use>
.
这篇关于为svg:image设置圆角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文