Question

我在draw2d-js中有这个问题，有一个用户图片，并希望它看起来像css3 border-radius。

我使用了draw2d.shape.basic.Image，但它在样式css border-radius中无效。

有人知道怎么做吗？

非常感谢您的帮助。

Answer 1

如果你看看这里接受的答案，我想你会发现它也回答了你的问题...... Setting rounded corners for svg:image

作为参考，我也在这里包括上述答案的内容。

＆＃39;边界半径＆＃39;不适用于svg：image元素（无论如何）。一个   解决方法是创建一个带圆角的矩形，然后使用   夹路径。

一个例子：   http://xn--dahlstrm-t4a.net/svg/clippath/border-radius-on-image.svg

来源的相关部分：

<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元素而不是使用

如何在draw2d-js中制作图像border-radius？

1 个答案: