如何在draw2d-js中制作图像边框半径？答案

【问题标题】：How to make a images border-radius in draw2d-js?如何在draw2d-js中制作图像边框半径？
【发布时间】：2016-05-11 06:47:58
【问题描述】：

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

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

有人知道怎么做吗？

非常感谢您的帮助。

【问题讨论】：

标签： css svg draw2d-js

【解决方案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)"/>

也可以创建多个矩形元素而不是使用

【讨论】：