如何在draw2d-js中制作一个图像的边框半径？

Question

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

我用过draw2d.shape.basic.Image，但它在css border-radius风格下不起作用。

有人知道怎么做吗？

非常感谢你的帮助。

Answer 1

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

为了参考，我在这里也包含了上面答案的内容。

'border-radius‘不适用于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)"/>

除了使用，还可以创建多个

元素