Question

我试图用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

Answer 1

'border-radius'不适用于svg：image元素（无论如何）。解决方法是创建一个带圆角的矩形，并使用剪辑路径。

An example

来源的相关部分：

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

Answer 2

对于那些只想制作圆形化身的人，这里以d3 v4为例。请注意，您需要在图像位于（0,0）时应用剪辑，因此您需要将图像转换（）到您想要的位置。

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')

Answer 3

另一个简单的替代方法：

将HTML r1 = [] r2 = [] for i in range(10): (s1, s2) = foo(i) r1.append(s1) r2.append(s2) # r1 now has the first returned strings from each iteration of the loop, and similarly for r2标记包装在<img>标记中。这使您可以使用常规的html样式：

<foreignObject>

为svg：image设置圆角

3 个答案: