CODEWITHSUNDEEP
htmlcsssvg
Lenonskie
Lenonskie

Reputation: 203

how to create rounded corners in svg

I'd like to create rounder corners for my svg path but I can't make it work. Is there a good way to accomplish this? here is my code: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  <clipPath id="svgClip">
  <path id="svgPath" d="M3,474 L957,471 942,24 40,1 z" />
  </clipPath>
  <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" />
</svg>

Thanks!

Upvotes: 0

Views: 6388

Answers (3)

Dan Friedman
Dan Friedman

Reputation: 5218

This may depend on compatibility but stroke-linecap works in Chromium browsers.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  <clipPath id="svgClip">
  <path id="svgPath" d="M3,474 L957,471 942,24 40,1 z" stroke-linecap="round"/>
  </clipPath>
  <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linecap="round"/>
</svg>

Upvotes: 0

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60976

You can use stroke-linejoin="round" and pick a suitable stroke-width.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="-100 -100 1200 1000">
  <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linejoin="round" stroke="black" stroke-width="80"/>
</svg>

Upvotes: 5

Paul LeBeau
Paul LeBeau

Reputation: 101820

There is no automatic or easy way to do this for paths. You can supply an r (radius) attribute to<rect> elements, but there is no equivalent for <path>.

You would need to calculate and add cubic bezier path commands (C or c) at the appropriate places in your path.

Upvotes: 0

Related Questions