CSS 애니메이션을 사용하여 한 번에 SVG의 두 속성에 애니메이션을 적용 할 수 있습니까?

Question

내가 잘못하고 있는지 확실하지 않은가요? 한 번에 SVG의 한 경로에서 두 속성을 애니메이션으로 만들 수 있습니까? 이 기능은 Firefox에서 기대할 수 있지만 Safari 나 Chrome에서는 기대하지 않습니다.

예 SVG (분명히 어떤 경우에 필요한 접두사)

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100%" height="100%" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <g id="holder"> 
      <path id="ShapeRight" d="M16,20 L21,16.5004951 C21,16.5004951 19.5760225,15.5035698 18.8640337,15.0051072 C17.9093558,14.336738 16,13 16,13 L16,20 L16,20 Z" opacity="0.55" fill="#999"></path> 
     </g> 
    </g> 
</svg> 

관련 말대꾸/CSS는 여기에

#holder { 
    #ShapeRight { 
    opacity: 1; 
    transform: scale(1); 
    animation: pulseArrow 2s forwards ease-in-out infinite; 
    transform-origin: 50% 50%; 
    display: inline-block; 
    } 
} 

@keyframes pulseArrow { 
    0% { 
    transform: scale(1) translateX(0); 
    opacity: 0; 
    } 
    50% { 
    transform: scale(2) translateX(0); 
    opacity: 1; 
    } 
    100% { 
    transform: scale(1) translateX(0); 
    opacity: 0; 
    } 
} 

는 Codepen의 감소이다 :

http://cdpn.io/hLFwn

당신 애니메이션의 마지막 부분 만 적용된다는 것을 알 수 있습니다 (pacity). CSS를 사용하여 SVG에 애니메이션을 적용하는 데 한계가 있습니까?

Answer 1

글쎄, 내가 크롬과 웹킷과 크롬에 티켓을 오픈하는 것은 확인했다 : https://code.google.com/p/chromium/issues/detail?id=319407

감사하게, 또한이 그들이 제안한 간단한 해결 방법은 애니메이션 속성에 채우기를 추가하는 것입니다. 예를 들면 다음과 같습니다.

@keyframes pulseArrow { 
    0% { 
    transform: scale(1) translateX(0); 
    opacity: 0; 
    fill: #fff; /* without this it won't work in Chrome/Safari */ 
    } 
    50% { 
    transform: scale(2) translateX(0); 
    opacity: 1; 
    } 
    100% { 
    transform: scale(1) translateX(0); 
    opacity: 0; 
    } 
} 

Answer 2

그래서 이상했습니다. Chrome에서 문제를 재현 할 수 있었지만 애니메이션의 두 속성을 모두 적용하지 않는 이유를 알 수 없습니다.

간단히 해결하면 #ShapeRight에는 위아래로만 스케일링하는 애니메이션이 있습니다. #holder에는 불투명도를 변경하는 자체 애니메이션이 있습니다 (불투명도가 어린이에게 영향을주기 때문에). 테스트 결과, 화살표가 커지거나 줄어들거나 페이드 인/페이드 아웃합니다.

나는 하나의 애니메이션으로 작동 시키려고했지만 어떤 이유인지는 알지 못한다. 몇 가지 아이디어를 시도했지만, 애니메이션에서 변형 스케일을 수행하고 불투명도를 변경하는 것은 불가능했습니다. 그래서 나는 파기를 계속할 것이지만, 발견 한 해결책은 당신을위한 임시 해결책이 될 수 있습니다. 여기

가된다, 그것은이 definitily 브라우저 버그 밝혀 http://codepen.io/Fernker/pen/BjzFt