SVG 아이콘 외부의 고리에 애니메이션

Question

SVG의 외부 링을 애니메이션화하려고합니다. 채워진 원이 아니기 때문에 요소를 변경하고 cx 및 cy로 철자를 바꿀 수없고 코드의 animateTransform을 통해 요소를 변경할 수 없습니다. 내가하려고하는 것은 100 %에서 80 %로 이동 한 다음 100 %까지 백업하여 외부 링을 "펄스"로 만드는 것입니다. 나는 전체 SVG의 애니메이션을 스케일 = "1 1"을 스케일 = ".8 .8"로 변경할 수 있지만, 전체는 SVG의 왼쪽 상단 모서리에서부터 시작됩니다. 바깥 쪽 링에 애니메이션을 적용하는 방법에 대한 의견이 있으십니까? 나는 SVG을 깨끗이하지 않는 일러스트 레이터를 사용하여 SVG을 생성합니다. 어떤 도움이라도 대단히 감사합니다.

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> 
<g> 
    <g> 
     <path fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2 
      c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2 
      c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9 
      c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7 
      c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z 
      M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9 
      c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8 
      c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8 
      C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9 
      C6.9,20.1,6.4,22.5,6.4,25z"/> 
    </g> 
    <path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4 
     H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z 
     M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/> 
</g> 
</svg> 

Answer 1

가장 간단한 해결책은 바깥 쪽 원을 두꺼운 선으로 다시 변환하는 것입니다. 동등한 서클은 다음과 같습니다.

<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF"/> 

반경을 애니메이션으로 만들면됩니다. 다음과 같이

<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF"> 
    <animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/> 
</circle> 

마지막 작업 데모는 다음과 같습니다

이

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> 
 
<g> 
 
    <g> 
 
     <circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF"> 
 
      <animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/> 
 
     </circle> 
 
    </g> 
 
    <path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4 
 
     H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z 
 
     M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/> 
 
</g> 
 
</svg>

Answer 2

애니메이션을 변환 CSS를 사용하여이 작업을 수행하는 것은 매우 쉽습니다. 필요한 경우 '-webkit-', '-moz-'및 '-ms-'접두사를 삽입하십시오.

@keyframes pulse { 
 
    0% { 
 
     transform: scale(1); 
 
    } 
 
    100% { 
 
     transform: scale(0.8); 
 
    } 
 
} 
 
#ring { 
 
    animation-name: pulse; 
 
    animation-duration: 0.5s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate-reverse; 
 
    transform-origin: center; 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50"> 
 
    <path id="ring" fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2 
 
      c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2 
 
      c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9 
 
      c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7 
 
      c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z 
 
      M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9 
 
      c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8 
 
      c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8 
 
      C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9 
 
      C6.9,20.1,6.4,22.5,6.4,25z" /> 
 
    <path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4 
 
     H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z 
 
     M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z" /> 
 
</svg>

그것은 너무 transform-origin가 무엇을 모방, 애니메이션을 분리하기 위해 추가 요소의 몇 가지를 추가하여 파이어 폭스에서이 작업을하는 것이 가능

. fiddle을 참조하십시오.