javascript 为 svg:image 设置圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7430580/
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
Setting rounded corners for svg:image
提问by malejpavouk
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.
我试图用 d3.js 为 s svg:image（嵌入在 SVG 中的图像）制作圆角。我不知道如何正确设置图像的样式，因为根据 W3C 规范，我应该能够使用 CSS，但是更近的边框或圆角边缘对我有用。
Thanks in advance.
提前致谢。
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");
Edit:
编辑：
Browsers tested: Firefox, Chrome
已测试浏览器：Firefox、Chrome
回答by Erik Dahlstr?m
'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.
'border-radius' 不适用于 svg:image 元素（无论如何）。一种解决方法是创建一个带圆角的矩形，并使用剪辑路径。
一个例子。
The relevant part of the source:
源码的相关部分：
<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)"/>
It's also possible to create several rect elements instead of using <use>.
也可以创建多个 rect 元素而不是使用<use>.
回答by Nacho Coloma
For those just interested in making rounded avatars, here goes an example using d3 v4. Notice that you need to apply the clipping while the image is at (0,0), so you need to translate() the image to where you want it.
对于那些只对制作圆形头像感兴趣的人，这里有一个使用 d3 v4 的示例。请注意，您需要在图像处于 (0,0) 时应用剪辑，因此您需要将图像 translate() 到您想要的位置。
import { select } from 'd3-selection';
const AVATAR_WIDTH = 80;
const avatarRadius = AVATAR_WIDTH / 2;
const svg = select('.my-container');
const defs = this.svg.append("defs");
defs.append("clipPath")
.attr("id", "avatar-clip")
.append("circle")
.attr("cx", avatarRadius)
.attr("cy", avatarRadius)
.attr("r", avatarRadius)
svg.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("width", AVATAR_WIDTH)
.attr("height", AVATAR_WIDTH)
.attr("xlink:href", myAvatarUrl)
.attr("clip-path", "url(#avatar-clip)")
.attr("transform", "translate(posx, posy)")
.append('My username')
回答by protocodex
Another, easy alternative:
另一个简单的选择：
Wrap an html <img>tag in a <foreignObject>tag. This allows you to use normal html styling:
将 html<img>标签包装在<foreignObject>标签中。这允许您使用普通的 html 样式：
<foreignObject x='0' y='0' width='100px' height='100px'>
<img
width='100px'
height='100px'
src={'path/to/image.png'}
style={{ borderRadius: '50%' }}
/>
</foreignObject>
