SVG에서만 폴리곤의 폭을 변형 시키면 좋겠다.

Question

기본적으로 SVG를 사용하여 (위치 지정을위한 PHP 루프 제외), 각 X가 단순히 위쪽과 아래쪽의 선상에 기본적으로 화살표가있는 다각형과 비슷한 모양을 만들고 싶습니다. 나는 다각형의 너비에 x를 따라 몇 픽셀을 더하여이 폴리곤을 복사합니다.

는 지금은 각 다각형에 다른 색의 졸업 칠을하고 싶지 그것은 내가 단지에서 먼저 색상으로 모두를 인쇄하여 사각형이 할 약 0.1 초

에 의해 상쇄된다 동일한 xy 좌표 위치는 두 번째 색상으로 동일한 사각형을 그리고 0에서 일반 너비로 그 너비를 애니메이션합니다. 결과는 x 축을 따라 움직이는 점진적인 채우기입니다.

이

거의 다른 색으로 유일하게 하나 하나를 다시 그릴에 의해 달성 될 수 있지만, 나는 각 다각형 점차적으로, 나는 그룹에서 보았다 바로 왼쪽에서 채우기 채우기 속성과 animateTransform와 함께 애니메이션을 적용 할 매우 고르지 않은 것 스케일 속성은 여전히 ​​각각의 미묘한 점을 배우고 있으며 무언가를 놓치고있을 수도 있습니다

제가보기에 보는 문제는 폴리곤이 설계된 너비가 아니며 아마도 그냥 놓치고 있다는 것입니다.

이제 직사각형을 사용할 수 있지만 더 멋진 것이 필요합니다.

당신은 내가 좋은 것 확인 제안 할 수있는 다른 길

여기

내가 직사각형이 코드

<rect x='".($blk*$x)."' y='110' height='30' width='0' style='stroke:none; fill: #ffff00'> 
        <animate attributeName='width' attributeType='XML' 
         to='".($blk-3)."' 
         begin='".($x/15)."s' 
         dur='.5s' 
         fill='freeze' 
        /> 
</rect> 

나는 BLK 크기와 X의 번역 PHP를 사용

Answer 1

scaleate 변환을 적용하여 animateTransform과 비슷한 효과를 얻을 수 있습니다. animateTransform은 rect 요소를 포함한 모든 모양에 적용됩니다.

가 1 미만, 즉 .5s 유효을하고 있지만 0.5 초

<svg> 
 
<rect x='100' y='20' height='30' width='0' style='fill: #ffff00'> 
 
        <animate attributeName='width' attributeType='XML' 
 
         to='100' 
 
         begin='1s' 
 
         dur='0.5s' 
 
         fill='freeze' 
 
        /> 
 
</rect> 
 
<g transform='translate(100, 0)'> 
 
<polygon transform='scale(0, 1)' 
 
     points='0, 110 40, 110, 40 140, 0 140' 
 
     style='fill: #ffff00'> 
 
        <animateTransform attributeName='transform' 
 
         type='scale' 
 
         to='2.5, 1' 
 
         begin='1s' 
 
         dur='0.5s' 
 
         fill='freeze' 
 
        /> 
 
</polygon> 
 
</g> 
 
</svg>