Html 影响其他Dasharray的第一个Svg stroke Dasharray

我在一个页面上有两个圆形svg，它应该根据传入的数据动态更改其数组。但是，传递给短划线数组的第一个值会影响后续值

例如，如果我分别将2传递给第一个笔划数组和4传递给第二个笔划数组，我希望它们在页面上具有不同的笔划，但它们根据传递的第一个值保持相同的笔划

这是密码笔

---

两个圆的掩码使用相同的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"
              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>