단일 svg 요소를 만들기 위해 여러 모양 병합 (Merging number of shapes to make a single svg element)

문제 설명

단일 svg 요소를 만들기 위해 여러 모양 병합 (Merging number of shapes to make a single svg element)

기본적으로 성능 향상을 위한 것입니다. SVG에서 요소 수가 많을수록 성능 효율성이 떨어지며 간단히 말해서 fps가 떨어집니다. SVG 일러스트레이션 라이브러리(ChelseaJS)의 성능 문제를 개선하려고 합니다. 많은 수의 요소에. 예를 들어, 두 개의 직사각형 요소 대신 하나의 요소일 수 있는 것처럼 모양을 병합할 수 있는 방법이 있습니까? ps: 태그를 제안하지 마세요. 요소를 함께 보관하기 위한 상자와 같습니다.

참조 솔루션

방법 1:

I would start by reducing precision, 70.00000000000001 is maybe not required.
Unless you have a new fancy 256PP^2* screen of course.

<polygon points="160,150 
                 105,158.6602540378444 
                 70.00000000000001,201.96152422706632 
                 90,150 
                 69.99999999999997,98.0384757729337 
                 105,141.3397459621556" 
          stroke="#44d" stroke‑width="2" fill="#695fe6" fill‑opacity="0.3"></polygon>

source your star: https://beetrandahiya.github.io/ChelseaJS‑docs/shapes/star.html

(*) PP = Petabyte Pixels Horizontally and Vertically;
available from Metazonappoogle in 2032.00000001

From https://codepen.io/tigt/post/improving‑svg‑rendering‑performance:

3. Round to whole numbers

One of the truisms of computer performance is that integers are faster than fractional numbers — “floating‑point numbers”, officially. The <canvas> folks have known this trick for years.

This is usually fixed by taking all the numbers in the SVG — viewBox coordinates, data, height and width attributes — and rounding/multiplying them until they stop having decimals.

(by Beetran Dahiya、Danny '365CSI' Engelman)

참조 문서

1. Merging number of shapes to make a single svg element (CC BY‑SA 2.5/3.0/4.0)