SVG : <use>, javascript 및 animation

그래서 간단한 SVG 이미지가 포함되어 있습니다. 나는 특정 부분의 애니메이션 큐 자바 스크립트의 beginElement()을 사용하고 있습니다 :SVG : <use>, javascript 및 animation

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script> 
     jQuery(function(){ $('path').mouseover(function(){ $('animateTransform', this)[0].beginElement(); }); }); 
    </script> 
    </head> 
    <body> 
    <svg 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" 
     height="400" 
    > 
     <g transform="translate(200,200)" stroke="black"> 
     <g> 
     <g transform="rotate(0)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(24)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(48)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(72)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(96)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(120)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(144)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(168)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(192)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(216)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(240)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(264)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(288)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(312)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(336)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     </g> 
     </g> 
    </svg> 
    </body> 
</html>

이미지 자체은 매우 반복적이다 - 나는 <use> 태그로 많이 단순화 수 :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <path id="plume" d="M 0 0 L -20.791169081775931 97.81476007338057 A 2 2 0 0 0 20.791169081775931 97.81476007338057 Z" > 
     <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0"/> 
    </path> 
    <g id="fifth"> 
     <g transform="rotate(0.0)"> 
     <use xlink:href="#plume" fill="red"/> 
     </g> 
     <g transform="rotate(24.0)"> 
     <use xlink:href="#plume" fill="green"/> 
     </g> 
     <g transform="rotate(48.0)"> 
     <use xlink:href="#plume" fill="blue"/> 
     </g> 
    </g> 
    </defs> 
    <g transform="translate(200,200)" stroke="black"> 
    <use xlink:href="#fifth" transform="rotate(0.0)"/> 
    <use xlink:href="#fifth" transform="rotate(72.0)"/> 
    <use xlink:href="#fifth" transform="rotate(144.0)"/> 
    <use xlink:href="#fifth" transform="rotate(216.0)"/> 
    <use xlink:href="#fifth" transform="rotate(288.0)"/> 
    </g> 
</svg>

하지만 내가 할 수있는 ' 개별 <path> 요소에 대한 마우스 오버 이벤트를 더 이상 등록 할 필요가 없습니다. 이제 <use> 요소가 mouseover 이벤트를받습니다. 그리고 그들은 모두 같은 경로를 재사용하기 때문에, 내가 그 애니메이션에 신호를 보내면 모든 요소가 움직입니다.

두 번째 표현의 간결함을 첫 번째 표현의 개별 애니메이션 가능 성과 병합 할 수있는 방법이 있습니까?

출처

2012-01-03 rampion

brute-force 방법은 스크립트로 SVG 코드를 생성하는 것입니다.

아마도 더 정교한 것은 두 개의 경로를 갖는 것입니다. 하나는 정적이고 하나는 움직이는 것이고 필요한 경우 자바 스크립트를 통해 href 속성을 변경하는 것입니다.

출처

2012-01-03 15:31:55 zch

그래, javascript를 통한 svg 생성이 최상의 현재 솔루션 인 것 같습니다. – rampion

SVG : <use>, javascript 및 animation

답변

관련 문제