0

I have this question in draw2d-js, there is a user images and want to make it looks like css3 border-radius.

I have used draw2d.shape.basic.Image, but it did not work in style css border-radius.

Do any one knows how to make it?

Thanks very much for help.

Vinoth Krishnan
  • 2,925
  • 6
  • 29
  • 34
gaoyang
  • 1
  • 1

1 Answers1

0

If you take a look at the accepted answer here, I think you will find that it also answers your question... Setting rounded corners for svg:image

For reference I am including the content of the above answer here as well.

'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: http://xn--dahlstrm-t4a.net/svg/clippath/border-radius-on-image.svg

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

Community
  • 1
  • 1
Peter Andreas Moelgaard
  • 350
  • 3
  • 9