Question

我有一个简单的矩形，我希望多次使用，每个框中显示不同的数字：

<defs>
  <symbol id="numberCtr">
    <path d="M404.004 13.98h-380c-5.523 0-10 4.478-10 10v580c0 5.523 4.477 10 10 10h380c5.522 0 10-4.477 10-10v-580c0-5.522-4.478-10-10-10" fill="#a4dff8" />
    <path d="M399.543 589.83c0 5.523-4.478 10-10 10H38.465c-5.523 0-10-4.477-10-10V38.133c0-5.523 4.477-10 10-10h351.078c5.522 0 10 4.477 10 10v551.7zm4.46-575.85h-380c-5.522 0-10 4.478-10 10v580c0 5.524 4.478 10 10 10h380c5.523 0 10-4.476 10-10v-580c0-5.522-4.477-10-10-10" fill="#88cde5" />
    <text id="CtrDigit" font-size="545" font-family="Helvetica" x="70" y="510" opacity="0.5">8</text>
  </symbol>
</defs>

我正在实例化它们：

<use id="firstOne" xlink:href="#numberCtr" x="35" y="145" transform="scale(0.3)" />
<use id="secondOne" xlink:href="#numberCtr" x="535" y="145" transform="scale(0.3)" />
<use id="thirdOne" xlink:href="#numberCtr" x="1035" y="145" transform="scale(0.3)" />

我已尝试过此脚本来更改数字，但它会更改每个实例中的数字。如何单独控制每个实例（即在每个框中添加不同的数字）？

window.onload = function() {
  var element = document.getElementById("CtrDigit");
  element.innerHTML = "2";
}

使用具有不同文本元素的SVG符号

0 个答案: