我使用SVG.js创建了一个包含大量矩形，路径和文本作为子代的组。该组直观地表示一个数据对象。现在，如果数据更改了文本，并且填充也更改了。在一个屏幕上，可以有许多这样的对象，并且可以动态添加它们。因此，更新SVG的时间很慢。我在想是否有办法提高SVG的重绘速度。我的第一个想法是进行批量操作。就像我先创建SVG的结构，然后在DOM中批量构建它们一样，以便它可以一次完成更新。
是否可以使用SVG.js进行批量操作，或者是否可以通过其他任何方式来提高SVG的性能，同时又保留更改文本内容的能力？我考虑过使用defs，但是我有一些可变数量的子组件，其位置取决于所需要显示的元素数量。
这是我使用SVG.js创建的SVG。当前仅具有测试数据，但在实际使用中，TSpan数据将由用户定义，并且文本元素的数量也取决于用户输入。最后，最后的4条路径将根据用户输入具有填充颜色。在SVG中有可能吗？还是我每次想要一个具有不同数据的新对象时都需要继续重新创建该对象？
<g id="SvgjsG1010" transform="matrix(1,0,0,1,1197,241)">
<circle id="SvgjsCircle1011" r="42" cx="22" cy="19"></circle>
<rect id="SvgjsRect1012" width="45" height="48" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<rect id="SvgjsRect1013" width="45" height="4" x="0" y="48" fill="#09a583" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1014" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="15.900000095367432" y="46.200000166893005">
<tspan id="SvgjsTspan1015" dy="5.2" x="15.900000095367432">Owner</tspan>
</text>
<text id="SvgjsText1016" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="18.09999990463257" y="1.0000001668930052">
<tspan id="SvgjsTspan1017" dy="5.2" x="18.09999990463257">Test</tspan>
</text>
<g id="SvgjsG1018">
<rect id="SvgjsRect1019" width="10" height="10" x="5" y="10" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1020" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="5" y="11.200000166893005">
<tspan id="SvgjsTspan1021" dy="5.2" x="5">Note</tspan>
</text>
<rect id="SvgjsRect1022" width="10" height="10" x="17" y="10" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1023" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17" y="11.200000166893005">
<tspan id="SvgjsTspan1024" dy="5.2" x="17">Note</tspan>
</text>
<rect id="SvgjsRect1025" width="10" height="10" x="29" y="10" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1026" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="29" y="11.200000166893005">
<tspan id="SvgjsTspan1027" dy="5.2" x="29">Note</tspan>
</text>
<rect id="SvgjsRect1028" width="10" height="10" x="5" y="22" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1029" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="5" y="23.200000166893005">
<tspan id="SvgjsTspan1030" dy="5.2" x="5">Note</tspan>
</text>
<rect id="SvgjsRect1031" width="10" height="10" x="17" y="22" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1032" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17" y="23.200000166893005">
<tspan id="SvgjsTspan1033" dy="5.2" x="17">Note</tspan>
</text>
<rect id="SvgjsRect1034" width="10" height="10" x="29" y="22" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1035" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="29" y="23.200000166893005">
<tspan id="SvgjsTspan1036" dy="5.2" x="29">Note</tspan>
</text>
<rect id="SvgjsRect1037" width="10" height="10" x="5" y="34" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1038" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="5" y="35.200000166893005">
<tspan id="SvgjsTspan1039" dy="5.2" x="5">Note</tspan>
</text>
<rect id="SvgjsRect1040" width="10" height="10" x="17" y="34" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1041" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17" y="35.200000166893005">
<tspan id="SvgjsTspan1042" dy="5.2" x="17">Note</tspan>
</text>
<rect id="SvgjsRect1043" width="10" height="10" x="29" y="34" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1044" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="29" y="35.200000166893005">
<tspan id="SvgjsTspan1045" dy="5.2" x="29">Note</tspan>
</text>
</g>
<g id="SvgjsG1046">
<rect id="SvgjsRect1047" width="15" height="4" x="0" y="-4" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1048" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="2.9000000953674316" y="-5.799999833106995">
<tspan id="SvgjsTspan1049" dy="5.2" x="2.9000000953674316">User</tspan>
</text>
<rect id="SvgjsRect1050" width="15" height="4" x="15" y="-4" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1051" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17.90000009536743" y="-5.799999833106995">
<tspan id="SvgjsTspan1052" dy="5.2" x="17.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1053" width="15" height="4" x="30" y="-4" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1054" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="32.90000009536743" y="-5.799999833106995">
<tspan id="SvgjsTspan1055" dy="5.2" x="32.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1056" width="15" height="4" x="0" y="-8" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1057" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="2.9000000953674316" y="-9.799999833106995">
<tspan id="SvgjsTspan1058" dy="5.2" x="2.9000000953674316">User</tspan>
</text>
<rect id="SvgjsRect1059" width="15" height="4" x="15" y="-8" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1060" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17.90000009536743" y="-9.799999833106995">
<tspan id="SvgjsTspan1061" dy="5.2" x="17.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1062" width="15" height="4" x="30" y="-8" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1063" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="32.90000009536743" y="-9.799999833106995">
<tspan id="SvgjsTspan1064" dy="5.2" x="32.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1065" width="15" height="4" x="0" y="-12" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1066" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="2.9000000953674316" y="-13.799999833106995">
<tspan id="SvgjsTspan1067" dy="5.2" x="2.9000000953674316">User</tspan>
</text>
<rect id="SvgjsRect1068" width="15" height="4" x="15" y="-12" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1069" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17.90000009536743" y="-13.799999833106995">
<tspan id="SvgjsTspan1070" dy="5.2" x="17.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1071" width="15" height="4" x="30" y="-12" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1072" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="32.90000009536743" y="-13.799999833106995">
<tspan id="SvgjsTspan1073" dy="5.2" x="32.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1074" width="15" height="4" x="0" y="-16" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1075" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="2.9000000953674316" y="-17.799999833106995">
<tspan id="SvgjsTspan1076" dy="5.2" x="2.9000000953674316">User</tspan>
</text>
<rect id="SvgjsRect1077" width="15" height="4" x="15" y="-16" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1078" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="17.90000009536743" y="-17.799999833106995">
<tspan id="SvgjsTspan1079" dy="5.2" x="17.90000009536743">User</tspan>
</text>
<rect id="SvgjsRect1080" width="15" height="4" x="30" y="-16" fill="#ffffff" stroke="#000000" stroke-width="0.5"></rect>
<text id="SvgjsText1081" font-family="Helvetica" font-size="4" fill="#000000" family="Helvetica" size="4" x="32.90000009536743" y="-17.799999833106995">
<tspan id="SvgjsTspan1082" dy="5.2" x="32.90000009536743">User</tspan>
</text>
</g>
<g id="SvgjsG1083" transform="matrix(1,0,0,1,-2,0)">
<circle id="SvgjsCircle1084" r="4.1" cx="0" cy="0"></circle>
<path id="SvgjsPath1085" d="M0 0 0 4 A4 4 0 0 1 -4 0 Z" fill="#ff0000" stroke="#ffffff" stroke-width="0.1"></path>
<text id="SvgjsText1086" font-family="Helvetica" font-size="2" fill="#000000" family="Helvetica" size="2" x="-3" y="0.10000008344650269">
<tspan id="SvgjsTspan1087" dy="2.6" x="-3">T</tspan>
</text>
<path id="SvgjsPath1088" d="M0 0 4 0 A4 4 0 0 1 0 4 Z" fill="#ff0000" stroke="#ffffff" stroke-width="0.1"></path>
<text id="SvgjsText1089" font-family="Helvetica" font-size="2" fill="#000000" family="Helvetica" size="2" x="1" y="0.10000008344650269">
<tspan id="SvgjsTspan1090" dy="2.6" x="1">C</tspan>
</text>
<path id="SvgjsPath1091" d="M0 0 -4 0 A4 4 0 0 1 0 -4 Z" fill="#ff0000" stroke="#ffffff" stroke-width="0.1"></path>
<text id="SvgjsText1092" font-family="Helvetica" font-size="2" fill="#000000" family="Helvetica" size="2" x="-2.899999976158142" y="-3.8999999165534973">
<tspan id="SvgjsTspan1093" dy="2.6" x="-2.899999976158142">F</tspan>
</text>
<path id="SvgjsPath1094" d="M0 0 0 -4 A4 4 0 0 1 4 0 Z" fill="#ff0000" stroke="#ffffff" stroke-width="0.1"></path>
<text id="SvgjsText1095" font-family="Helvetica" font-size="2" fill="#000000" family="Helvetica" size="2" x="1" y="-3.8999999165534973">
<tspan id="SvgjsTspan1096" dy="2.6" x="1">A</tspan>
</text>
</g>
</g>