0

I am trying to use js svg library to make a rectangle with only top left corner rounded. I found in it's documentation this example:

script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<script>
    var draw = SVG().addTo('#graphix').size(300, 300);
    var rect = draw.rect(300, 300).attr({ fill: '#f06' });
    rect.radius(100);
   
    //rect

  //end
</script>

it rounds all of the corners. Is it posible using this library to round only top left or top right corner? Or what should I use as an alterative? I realy can't get it in the previous question that was associated with my post. Solution simply doesn't work. I tried to use some examples from question here svg / d3.js rounded corner on one corner of a rectangle but those examples are rounding whole right side instead of doing it only for one corner for example top right/left. The main problem for me is that I have different radius for different corners.

Eran Medan
  • 44,555
  • 61
  • 184
  • 276
IvanIvanow
  • 13
  • 3
  • The duplicate explains how to draw a rectange with one corner rounded. If it "doesn't work" edit your question to show what you're trying and explain what "doesn't work" means. – Robert Longson Oct 14 '20 at 15:18
  • @RobertLongson Sorry about that. I am trying to make round only of one corner not all side. For example top left for bottom left I have a different radius. – IvanIvanow Oct 14 '20 at 15:23
  • And that's precisely what that answer I linked you to is about. – Robert Longson Oct 14 '20 at 15:27
  • @RobertLongson I just don't t understand how to round those corners by there radius. – IvanIvanow Oct 14 '20 at 15:34
  • Show what you're doing with the information from the link and describe how it differs from what you want. I.e. post the new code of your attempt. – Robert Longson Oct 14 '20 at 16:07

0 Answers0