为 svg:image 设置圆角

发布于 2024-12-04 14:45:25 字数 512 浏览 1 评论 0原文

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

原文

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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初见你 2024-12-11 14:45:25

'border-radius' 不适用于 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 元素，而不是使用。

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

An example.

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

回复收藏 0 原文

一身骄傲 2024-12-11 14:45:25

现在还有另一种更干净的方法可以做到这一点。它使用插入剪辑路径。

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

There is another way to do that nowadays which is a bit cleaner. It's to use an inset clip-path.

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

回复收藏 0 原文

自此以后，行同陌路 2024-12-11 14:45:25

另一个简单的替代方案：

将 html 标签包装在标签中。这允许您使用正常的 html 样式：

<foreignObject x='0' y='0' width='100px' height='100px'>
  <img
    width='100px'
    height='100px'
    src={'path/to/image.png'}
    style={{ borderRadius: '50%' }}
  />
</foreignObject>

Another, easy alternative:

Wrap an html <img> tag in a <foreignObject> tag. This allows you to use normal html styling:

<foreignObject x='0' y='0' width='100px' height='100px'>
  <img
    width='100px'
    height='100px'
    src={'path/to/image.png'}
    style={{ borderRadius: '50%' }}
  />
</foreignObject>

回复收藏 0 原文

维持三分热 2024-12-11 14:45:25

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

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.

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

回复收藏 0 原文

~没有更多了~