JSON과 속성을 고치면 오른쪽(좁은 화면에서는 아래) 엘리먼트가 바로 바뀝니다. JSON을 일부러 망가뜨리면 엘리먼트의 오류 상태를 볼 수 있습니다.
max·unit·height-units는 0보다 큰 수만 씁니다. 비우거나 0 이하·숫자가 아닌 값이면 엘리먼트가 기본값(max는 데이터 최댓값, unit 24, height-units 5)으로 그립니다.
%20--%3e%3cpath%20d='M32%204%20L58%2019%20L32%2034%20L6%2019%20Z'%20fill='none'%20stroke='%232c64c9'%20stroke-width='1.5'%20stroke-dasharray='2%203'%20opacity='0.35'%20/%3e%3cg%20filter='url(%23shadow)'%3e%3c!--%20뒤쪽%20가장%20높은%20기둥%20(Z%20=%20높음)%20--%3e%3cg%20id='pillar-high'%3e%3c!--%20Left%20face%20--%3e%3cpolygon%20points='23,21%2032,26%2032,49%2023,44'%20fill='%231e40af'%20/%3e%3c!--%20Right%20face%20--%3e%3cpolygon%20points='32,26%2041,21%2041,44%2032,49'%20fill='%231d3557'%20/%3e%3c!--%20Top%20face%20--%3e%3cpolygon%20points='32,15%2041,21%2032,26%2023,21'%20fill='url(%23top1)'%20/%3e%3c/g%3e%3c!--%20오른쪽%20중간%20기둥%20--%3e%3cg%20id='pillar-mid'%3e%3c!--%20Left%20face%20--%3e%3cpolygon%20points='37,31%2046,36%2046,55%2037,50'%20fill='%232563eb'%20/%3e%3c!--%20Right%20face%20--%3e%3cpolygon%20points='46,36%2055,31%2055,50%2046,55'%20fill='%231e3a8a'%20/%3e%3c!--%20Top%20face%20--%3e%3cpolygon%20points='46,25%2055,31%2046,36%2037,31'%20fill='url(%23top2)'%20/%3e%3c/g%3e%3c!--%20왼쪽%20앞%20낮은%20기둥%20--%3e%3cg%20id='pillar-low'%3e%3c!--%20Left%20face%20--%3e%3cpolygon%20points='9,37%2018,42%2018,56%209,51'%20fill='%233b82f6'%20/%3e%3c!--%20Right%20face%20--%3e%3cpolygon%20points='18,42%2027,37%2027,51%2018,56'%20fill='%231d4ed8'%20/%3e%3c!--%20Top%20face%20--%3e%3cpolygon%20points='18,32%2027,37%2018,42%209,37'%20fill='url(%23top3)'%20/%3e%3c/g%3e%3c/g%3e%3c!--%202.5D%20심볼%20포인트%20빛%20반사%20효과%20--%3e%3ccircle%20cx='32'%20cy='15'%20r='1.5'%20fill='%23ffffff'%20opacity='0.8'%20/%3e%3ccircle%20cx='46'%20cy='25'%20r='1.2'%20fill='%23ffffff'%20opacity='0.8'%20/%3e%3ccircle%20cx='18'%20cy='32'%20r='1.2'%20fill='%23ffffff'%20opacity='0.8'%20/%3e%3c/svg%3e){kind=small}
2.5d-ui
2.5d-ui