我正在尝试使用 d3.js 为 s svg:image(嵌入在 SVG 中的图像)制作圆 Angular 。我找不到如何正确设置图像样式的方法,因为根据 W3C 规范,我应该能够使用 CSS,但较窄的边框和圆 Angular 边缘对我来说都适用。
提前致谢。
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");
编辑:
测试的浏览器:Firefox、Chrome
最佳答案
'border-radius' 不适用于 svg:image 元素(无论如何)。解决方法是创建一个带圆 Angular 的矩形,并使用剪辑路径。
来源的相关部分:
<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)"/>
也可以创建多个矩形元素而不是使用 <use>
.
关于javascript - 为 svg :image 设置圆 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7430580/