You may use clipPath
too. It’s kind of a hack but it may be easier to implement.
Assuming the follow:
- your
rect
iswidth="10"
andheight="51"
- the top corner will be
rx="5"
andry="5"
<svg>
<defs>
<clipPath id="round-corner">
<rect x="0" y="0" width="10" height="56" rx="5" ry="5"/>
</clipPath>
</defs>
<!-- if you want to use x="35" y="-135" put clip-path on a `g` element -->
<rect width="10"
height="51"
clip-path="url(#round-corner)"
style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
</svg>
Some Notes:
So the clipPath > rect > width
is exactly the same as your rect
.
Instead for clipPath > rect > height
, you have to consider the corner radius on top and thus the height should be rect.height
+ desired-corner-radius
(in this case 51px + 5px).
In that way you won’t touch the bottom part of your rect with the clipPath
.