Question

我需要动态更改笔划宽度，并且需要使圆的内半径保持不变。

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

我怎么能达到那种效果？

我使用的

svg在下面。我要创建彩虹圆，并且圆的宽度必须根据所选的亮度进行更改。

宽度正确更改，但我想保持内半径不变。

<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>

Answer 1

圆的笔触的内半径始终是笔触宽度的一半，而不是半径的一半，因此，要将内半径保持在同一位置，您必须将圆的半径增加其笔触的一半，例如：{{ 3}}

<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>

b和c上的笔划的内半径为100。

Answer 2

只需调用此函数。祝你有美好的一天

<!-- Safari doesn't support Promise syntax of decodeAudioData -->
<script src="https://cdn.jsdelivr.net/gh/mohayonao/promise-decode-audio-data@eb4b1322113b08614634559bc12e6a8163b9cf0c/build/promise-decode-audio-data.min.js"></script>
<canvas></canvas>

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);

如何在不更改圆的内半径的情况下更改笔划宽度

2 个答案: