Rounded corners in SVG path semi circle

Question

I have a path which is a semi-circle. How do I make the corners rounded? I do not want to use stroke-linecap: round as I need it to be rounded only on these corners:

<svg>
  <g>
    <!--background -->
    <path fill="none" stroke-dasharray="" stroke-width="16" stroke="#607985" d="M30 100 A 40 40 0 0 1 170 100"></path>
    <!-- strokes -->
    <path id="meter-back" fill="none" stroke-width="15" stroke="white" d="M30 100 A 40 40 0 0 1 170 100"></path>
    <!--progress -->
    <path id="meter-fill" fill="none" stroke-dashoffset="219.942" stroke-dasharray="109.971, 109.971" stroke="rgba(96,121,133,0.7)" stroke-width="15" d="M30 100 A 40 40 0 0 1 170 100" stroke="#607985"></path>

  </g>
</svg>

Does this answer your question? [SVG rounded corner](https://stackoverflow.com/questions/10177985/svg-rounded-corner) — Peter O., Nov 16 '21 at 00:16
You have to modify the path to add little arcs at the corners. As per some of the answers in @PeterO's link. There is no simple way. Except for the `` element which has `rx`/`ry` attributes. — Paul LeBeau, Nov 16 '21 at 08:45
Thanks @Peter, Yes I did go through that but I am still not able to make it work — Kshri, Nov 16 '21 at 14:53

score 2 · Answer 1 · answered Nov 16 '21 at 16:46

2

Use getPath routine to compute the desired path (The 0,0 point in the center of the semi-circle):

const getPath = (outerRadius, innerRadius, cornerRadius) => {
  return `M ${-outerRadius},0 
    A ${outerRadius},${outerRadius} 1 1 1 ${outerRadius},0
    Q ${outerRadius},${cornerRadius} 
    ${outerRadius-cornerRadius},${cornerRadius} 
    H ${innerRadius+cornerRadius}
    Q ${innerRadius},${cornerRadius} 
    ${innerRadius},0 
    A ${innerRadius},${innerRadius} 0 0 0 
    ${-innerRadius},0       
    Q ${-innerRadius},${cornerRadius} 
    ${-innerRadius-cornerRadius},${cornerRadius} 
    H ${-outerRadius+cornerRadius}
    Q ${-outerRadius},${cornerRadius} 
    ${-outerRadius},0 
  Z`;
};

d3.select('path').attr('d', getPath(120, 90, 12));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg width='300' height='200'>
  <g transform='translate(150,150)'>
    <path stroke='red' fill='none'/>
    <circle fill='red' r='5' cx='0' cy='0'/>
  </g>
</svg>

answered Nov 16 '21 at 16:46

Michael Rovinsky

6,807
7
15
30

1

Thank you so much! – Kshri Nov 16 '21 at 17:52
Unfortunately, the 'stroke-dasharray' to fill in the meter as shown in the image in grey color will no longer work as the path is now just an outline – Kshri Nov 16 '21 at 18:33
So, is there any way to add just the radius points to the existing path? – Kshri Nov 16 '21 at 18:33
@Kshri I understand the problem, going to try to solve it... – Michael Rovinsky Nov 17 '21 at 05:43
That would be very helpful. Thank you so much! – Kshri Nov 17 '21 at 13:39

score 2 · Accepted Answer · answered Nov 18 '21 at 05:50

Here is a fixed solution. dividerPos can be in range from 0 to 1:

const getPath = (outerRadius, innerRadius, cornerRadius, dividerPos) => {
  const angle = Math.PI * (1 - dividerPos);
  const outerPointX = outerRadius * Math.cos(angle);
  const outerPointY = outerRadius * -Math.sin(angle);
  const innerPointX = innerRadius * Math.cos(angle);
  const innerPointY = innerRadius * -Math.sin(angle);

  const left = `M ${-outerRadius},0 
    A ${outerRadius},${outerRadius} 0 0 1 
    ${outerPointX},${outerPointY}
    L ${innerPointX},${innerPointY}
    A ${innerRadius},${innerRadius} 0 0 0 ${-innerRadius},0       
    Q ${-innerRadius},${cornerRadius} 
    ${-innerRadius-cornerRadius},${cornerRadius} 
    H ${-outerRadius+cornerRadius}
    Q ${-outerRadius},${cornerRadius} 
    ${-outerRadius},0 
  Z`;
  
  const right = `M ${outerPointX},${outerPointY}
    A ${outerRadius},${outerRadius} 0 0 1 
    ${outerRadius},0
    Q ${outerRadius},${cornerRadius} 
    ${outerRadius-cornerRadius},${cornerRadius} 
    H ${innerRadius+cornerRadius}
    Q ${innerRadius},${cornerRadius} 
    ${innerRadius},0 
    A ${innerRadius},${innerRadius} 0 0 0 
    ${innerPointX},${innerPointY}       
  Z`;

  return {left, right};
};

const {left, right} = getPath(120, 90, 15, 0.5);
d3.select('.left').attr('d', left);
d3.select('.right').attr('d', right);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='300' height='200'>
  <g transform='translate(150,150)'>
    <path stroke='grey' fill='grey' class='left'/>
    <path stroke='grey' fill='none' class='right'/>
  </g>
</svg>

But the passing 1 for dividerPos is not filling the path completely: getPath(120, 90, 15, 1); Can something be done for this? — Kshri, Nov 18 '21 at 17:52
@Kshri for the extreme cases (0 and 1) you can use the first solution — Michael Rovinsky, Nov 19 '21 at 06:12

Rounded corners in SVG path semi circle

2 Answers2