I am trying to implement a bar chart like diagram. I have the following html element
<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
I want to give the top corner of the rectangle a rounded shape. How is it possible?
I am not able to apply border-radius property.
To draw a rectangle in HTML SVG, use the SVG <rect> element. For rounded corners, set the rx and ry attribute, which rounds the corners of the rectangle.
In Inkscape, rounding the corners of a rectangle is easy - you select the object, press F4 (rectangle tool), and drag the circular nodes.
You may use clipPath
too. It's kind of a hack but it may be easier to implement.
Assuming the follow:
rect
is width="10"
and height="51"
rx="5"
and ry="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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With