Я использую SVG.js, чтобы создать группу, которая имеет много прямоугольников, путей и текстов в детстве.Эта группа визуально представляет объект данных.Теперь, если данные изменяются, изменяются и тексты, и заливки.На одном экране может быть много таких объектов, и их можно добавлять динамически.Поэтому время обновления SVG медленное.Я думал, есть ли способ улучшить скорость перерисовки SVG.Моей первой мыслью было выполнение массовых операций.Как будто я создаю структуру SVG перед раздачей, а затем набираю темп в DOM, чтобы он обновлялся за один раз.
Есть ли способ выполнять массовые операции с SVG.js или, может быть, каким-либо другим способом повысить производительность SVG, сохраняя при этом возможность изменять текстовое содержимое?Я думал об использовании defs, но у меня есть несколько подкомпонентов с переменным количеством, расположение которых зависит от количества элементов, необходимых для отображения.
Вот SVG, который я создаю с помощью SVG.js.Это в настоящее время имеет только тестовые данные, но при реальном использовании данные 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>