d3.js 为svg:image设置圆角

jjhzyzn0  于 2022-11-12  发布在  其他
关注(0)|答案(4)|浏览(358)

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

编辑:
已测试的浏览器:火狐浏览器、Chrome浏览器

yh2wf1be

yh2wf1be1#

'border-radius'不适用于svg:image元素(无论如何)。解决方法是创建一个圆角矩形,并使用clip-path。
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>

wooyq4lh

wooyq4lh2#

另一个简单的选择:
将html <img>标记 Package 在<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>
w8rqjzmb

w8rqjzmb3#

现在还有另一种更简洁的方法,那就是使用inset clip-path

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

hjqgdpho4#

对于那些只对制作圆形头像感兴趣的人,这里有一个使用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')

相关问题