rect's stroke doesn't follow the rect's radius

Asked May 11 '21 at 14:23

Active May 11 '21 at 14:23

Viewed 24 times

I have a svg rect element that has some border radius by using rx: 5; ry: 5. I had to it a stroke of width 3. Has you can see the stroke doesn't really follow the rect border, it seems less rounded:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet">
  <style>
    .ctn {
      x: 0;
      y: 0;
      rx: 5;
      ry: 5;
      fill: blue;
      stroke-width: 3;
      stroke: red;
    }
  </style>
  <rect width="300" height="86" class="ctn"/>
</svg>

Does have anyone an idea how I could make this stroke follow the parent's radius?

asked May 11 '21 at 14:23

johannchopin

13,720
10
55
101

3

overflow: visible; to SVG to understand the issue – Temani Afif May 11 '21 at 14:28
Omitting units in CSS for non-zero values is invalid for rx and ry. You should correct that and raise a bug in the browser that accepts it. – Robert Longson May 11 '21 at 14:39
@RobertLongson Oh ok thanks for the advice it just feel kind of wrong to add units to a svg, the browser is chrome by the way. – johannchopin May 12 '21 at 07:17
If it feels wrong to use units, use attributes rather than CSS styles. – Robert Longson May 12 '21 at 07:57

rect's stroke doesn't follow the rect's radius

0 Answers0