如何在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：圖像元素（不管怎樣）。 A 解決方法是創建具有圓角的矩形，並使用剪輯路徑 。

一個例子： 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)"/> 

它也可以創建，而不是使用

幾個矩形元素