设置svg：image的圆角

一尘不染

设置svg：image的圆角

css

我试图用d3.js为s
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

阅读 1370

2020-05-16

共1个答案

一尘不染

“边界半径”不适用于svg：image元素（无论如何）。一种解决方法是创建带有圆角的矩形，并使用剪切路径。

来源的相关部分：

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

2020-05-16