How to change stroke-width without changing inner radius of the circle

Question

I need to change stroke-width dynamically and I need to keep inner radius of the circle unchangeable.

<g fill="none" :stroke-width="brightness * 60" ...

How can I achieve that effect ?

svg that I use is below. I want to create rainbow circle and the width of the circle has to be changed depending on the chosen brightness.

The width changes correctly but I would like to keep inner radius unchangeable.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-35 -35 270 270">
    <defs>
        <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ff0000" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#ffff00" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffff00" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#00ff00" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#00ff00" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#00ffff" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#00ffff" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#0000ff" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#0000ff" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#ff00ff" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#ff00ff" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#ff0000" :stop-opacity="saturation"/>
        </linearGradient>
     </defs>

     <g fill="none" :stroke-width="brightness * 60" transform="translate(100,100)">
         <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
         <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
         <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
         <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
         <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
         <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
     </g>
     <circle cx="100" cy="100" r="65" :fill="hsla"/>
 </svg>

score 1 · Answer 1 · answered Apr 21 '19 at 20:44

The inner radius of a circle's stroke is always half the stroke width less than the radius, so to keep the inner radius in the same place you have to increase the radius of the circle by half of its stroke, like: https://jsfiddle.net/f3wctoyL/1/

<svg width="400" height="400">
    <circle id="a" cx="200" cy="200" r="100" />
    <circle id="b" cx="200" cy="200" r="110" />
    <circle id="c" cx="200" cy="200" r="105" />
</svg>

The strokes on circles b and c have inner radii of 100.

tdjprog · Answer 2 · 2019-04-22T03:09:29.843

just call this function. have a nice day

function strokeInside(svgIdSelector, strokeValue) {
   let svgElement = document.getElementById(svgIdSelector),
    svgRect = svgElement.getBBox(),
    scale = ( (svgRect.height - strokeValue) * 100/svgRect.height )/100;

   if (scale < 0.5) {
    console.error("max stroke value = " + [svgRect.height / 2]);
    return false;
   }

   svgElement.setAttributeNS(null, "stroke-width", strokeValue/scale);
   svgElement.setAttributeNS(null, "transform", "translate(100,100) scale(" + scale + ")");
   return true;
}

strokeInside("group", 70);

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-35 -35 270 270">
    <defs>
        <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ff0000" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#ffff00" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffff00" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#00ff00" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#00ff00" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#00ffff" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#00ffff" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#0000ff" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#0000ff" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#ff00ff" :stop-opacity="saturation"/>
        </linearGradient>
        <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#ff00ff" :stop-opacity="saturation"/>
            <stop offset="100%" stop-color="#ff0000" :stop-opacity="saturation"/>
        </linearGradient>
     </defs>

     <g id="group" fill="none" stroke-width="1" transform="translate(100,100)">
         <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
         <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
         <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
         <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
         <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
         <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
     </g>
 </svg>

thank you very much. I've tried your solution and it works but with a bit opposite behavior - inner radius changes and outer one doesn't. What can be the problem ? — Yuriy Korovko, Apr 22 '19 at 18:34

How to change stroke-width without changing inner radius of the circle

2 Answers2