Setting rounded corners for svg:image

by

‘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.

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 <use>.

More Related Contents:

  1. jQuery SVG, why can’t I addClass?
  2. Scaling d3 v4 map to fit SVG (or at all)
  3. How to add a tooltip to an svg graphic?
  4. Replacing d3.transform in D3 v4
  5. How do I include newlines in labels in D3 charts?
  6. Updating SVG Element Z-Index With D3
  7. D3 Appending Text to a SVG Rectangle
  8. In d3, how to get the interpolated line data from a SVG line?
  9. Creating and appending detached elements with d3.create
  10. Label outside arc (Pie chart) d3.js
  11. D3js take data from an array instead of a file
  12. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  13. Where is d3.svg.diagonal()?
  14. How to draw a path smoothly from start point to end point in D3.js
  15. (Embed and) Refer to an external SVG via D3 and/or javascript
  16. Plotting points on a map with D3
  17. Wrapping Text in D3
  18. D3 fill shape with image using pattern
  19. How can I animate a progressive drawing of svg path?
  20. Circles in Map Displayed Incorrect Location in D3 V4
  21. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  22. svg / d3.js rounded corners on one side of a rectangle
  23. SVG to Canvas with d3.js
  24. How do I return y coordinate of a path in d3.js?
  25. Display an arrow head in the middle of D3 force layout link
  26. Animate marquee on SVG curve
  27. Perspective transform of SVG paths (four corner distort)
  28. Calculate SVG Path Centroid with D3.js
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment