我在一个页面上有两个圆 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>