typescript - 如何使用 SVG.js 进行批量 SVG 操作

Question

我使用 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>

标签： typescriptsvgsvg.js