第一个 Svg 笔划 Dasharray 影响其他 dasharrays
First Svg stroke Dasharray affecting the other dasharrays
我在页面上有两个圆形 svg，它们应该根据传入的数据动态更改它的 stroke-dasharray。但是，传递给 dash-array 的第一个值会影响后续值。
例如，如果我分别将 2 传递给第一个，将 4 传递给第二个 stroke-dasharray，我希望它们在页面上具有不同的笔划，但根据传递的第一个值，它们保持相同的笔划。
这是代码笔example
<div class="dashed-circle-progress">
<div>
<svg
class="progress-radial"
width="100px"
height="100px"
viewBox="0 0 120 120"
shape-rendering="geometricPrecision"
>
<defs>
<mask
id="circle_mask"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="4"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
<div class="dashed-circle-progress">
<div>
<svg
class="progress-radial"
width="100px"
height="100px"
viewBox="0 0 120 120"
shape-rendering="geometricPrecision"
>
<defs>
<mask
id="circle_mask"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="16"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
您为两个圆圈的掩码使用了相同的 ID。
如果您使用不同的 ID，一切正常：
<div class="dashed-circle-progress">
<div>
<svg class="progress-radial" width="100px" height="100px" viewBox="0 0 120 120" shape-rendering="geometricPrecision">
<defs>
<mask
id="circle_mask_1"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar_1"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="4"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask_1)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
<div class="dashed-circle-progress">
<div>
<svg class="progress-radial" width="100px" height="100px" viewBox="0 0 120 120" shape-rendering="geometricPrecision">
<defs>
<mask
id="circle_mask_2"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar_2"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="16"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask_2)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
我在页面上有两个圆形 svg，它们应该根据传入的数据动态更改它的 stroke-dasharray。但是，传递给 dash-array 的第一个值会影响后续值。
例如，如果我分别将 2 传递给第一个，将 4 传递给第二个 stroke-dasharray，我希望它们在页面上具有不同的笔划，但根据传递的第一个值，它们保持相同的笔划。
这是代码笔example
<div class="dashed-circle-progress">
<div>
<svg
class="progress-radial"
width="100px"
height="100px"
viewBox="0 0 120 120"
shape-rendering="geometricPrecision"
>
<defs>
<mask
id="circle_mask"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="4"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
<div class="dashed-circle-progress">
<div>
<svg
class="progress-radial"
width="100px"
height="100px"
viewBox="0 0 120 120"
shape-rendering="geometricPrecision"
>
<defs>
<mask
id="circle_mask"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="16"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
您为两个圆圈的掩码使用了相同的 ID。
如果您使用不同的 ID，一切正常：
<div class="dashed-circle-progress">
<div>
<svg class="progress-radial" width="100px" height="100px" viewBox="0 0 120 120" shape-rendering="geometricPrecision">
<defs>
<mask
id="circle_mask_1"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar_1"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="4"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask_1)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>
<div class="dashed-circle-progress">
<div>
<svg class="progress-radial" width="100px" height="100px" viewBox="0 0 120 120" shape-rendering="geometricPrecision">
<defs>
<mask
id="circle_mask_2"
x="0"
y="0"
width="100"
height="100"
maskUnits="userSpaceOnUse"
>
<circle
cx="50"
cy="50"
r="51"
stroke-width="0"
fill="black"
opacity="1"
/>
<circle
id="bar_2"
r="50"
cx="50"
cy="50"
fill="transparent"
stroke-dasharray="16"
stroke-dashoffset="100"
stroke="white"
stroke-width="9"
ref="progressBar"
></circle>
<circle
class="progress-radial-mask-inner"
cx="50"
cy="50"
r="40"
stroke-width="0"
fill="black"
opacity="1"
/>
</mask>
</defs>
<g mask="url(#circle_mask_2)">
<circle
class="progress-radial-track"
cx="50"
cy="50"
r="50"
opacity="1"
fill="#BDBDBD"
/>
<path
class="progress-radial-bar"
transform="translate(50, 50)"
d="M 0 0"
fill="#F7AC2F"
ref="progressRadialBar"
></path>
</g>
</svg>
</div>
</div>