내 SVG 코드에서 두 번째 사각형이 보이지 않는 이유는 무엇입니까?

저는이 코드 조각이 첫 번째 직사각형 뒤 얽힘을 그리고 두 번째 접선을 그려야한다는 것을 알고 있습니다. 두 번째 애니메이션은 단순히 너비를 확대합니다. 그래서이 코드를 보면 파란 막대가 나타나는 것을 볼 수 있습니다. 노란색 막대가 나타나고 예상대로 자랐지 만 끝나면 사라집니다. 두 점 모두 시작점과 너비가 동일하므로 진행 막대가 나타납니다. 파란색 막대의 길이가 400 픽셀, 노란색은 250입니다 그래서 나는 적어도 그게 내가내 SVG 코드에서 두 번째 사각형이 보이지 않는 이유는 무엇입니까?

<svg xmlns='http://www.w3.org/2000/svg'> 
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'> 
    </rect> 
    <rect x='10' y='10' height='20' width='0' style='stroke:#ff0000; fill: #ffff00'> 
<animate attributeName='width' attributeType='XML' 
    to='250' 
    begin='0s' 
    dur='2s' /> 
    </rect> 
</svg>

나는 여전히 SVG 새로운 오전 발생한다 생각하지만이에서 작동해야 파란색의 150 개 픽셀을 볼 수 내가 노란 막대기를 읽은 것은 맨 위에 놓이게된다.

출처

2017-12-04 Jeff Janes

가능한 복제 [성장 SVG의 RECT를 애니메이션하는 방법 (https://stackoverflow.com/questions/31200679/how-to-animate-svg- rect-to-grow) –

짧은 대답 :''태그에'fill = "freeze"를 추가하십시오. –

다른 질문은 방향에 대해 더 많은 일을해야한다고 생각합니다. 나는 잘 자랄 수는 있지만 살아 움직일 때 사라지는 문제가 있습니다. "정지"가 트릭을했습니다. –

귀하의 animate 태그는 값을 가진 명시적인 fill 매개 변수를 포함해야합니다. 그렇지 않으면 기본값 fill='remove'이 사용됩니다. 즉, 애니메이션 매개 변수가 애니메이션 이전의 값 (이 경우 "0")으로 되돌아갑니다.

<svg xmlns='http://www.w3.org/2000/svg'> 
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'> 
    </rect> 
    <rect id="r1" x='10' y='10' height='20' width='0' style='stroke:#ff0000; fill: #ffff00'> 
<animate attributeName='width' attributeType='XML' 
    from='0' 
    to='250' 
    begin='0s' 
    dur='2s' 
    fill='freeze' 
     /> 
    </rect> 
</svg>

(에서 전체 참조 : https://www.w3.org/TR/SVG/animate.html#ValueAttributes)의

출처

2017-12-04 22:00:23 jsbueno

내 SVG 코드에서 두 번째 사각형이 보이지 않는 이유는 무엇입니까?

답변

관련 문제