为svg:image设置圆角

Question

我试图使用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"); 

编辑：

已测试的浏览器：Firefox，Chrome

- malejpavouk

Answer 1

'border-radius'属性目前还无法应用于svg:image元素。一个解决方法是创建一个带有圆角的矩形，并使用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)"/>

除了使用<use>之外，还可以创建多个rect元素。

- Erik Dahlström

---

我在d3.js代码中实现这个功能遇到了麻烦... @malejpavouk，你有更具体的代码示例吗？这样我就可以在我的d3可视化中添加带圆角的图像了。 - wlindner

我的应用程序有点复杂，但你需要的代码是从Erik发布的示例中复制粘贴的（如果我没有记错，并且没有进行任何重大更改）。 - malejpavouk

这个工作是不是在d3.js之外？我在其他地方使用它，但它不起作用。 - Travis Su

Answer 2

现在有另一种更加简洁的方式来实现这个，就是使用内嵌剪切路径。

<image xlink:href="imgUrl" width="100%" height="100%" clip-path="inset(0% round 15px)">

- Py.

---

我的代码没用，但 CSS 可以使用：image{ clip-path: inset(0% round 50%); } - Youth overturn

@Youthoverturn的解决方案对我有效。 - undefined

Answer 3

另一个简单的选择是:

将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>

- protocodex

---

哇，我从没遇到过foreignObject! 这对我的情况非常有效，对我正在尝试创建的动态生成的合成效果非常有用 - 感谢您的提示！ - Iain Collins

Answer 4

对于那些只是想做圆形头像的人，这里提供一个使用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')

- Nacho Coloma