logo标签列表

SVG: <use>、javascript 和动画

javascriptanimationsvg
3

我有一个简单的内嵌SVG图片。我正在使用JavaScript中的beginElement()来开始特定部分的动画：

<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>

但是，如果我不让
1个回答
1

暴力方法是使用脚本生成SVG代码。

更加优雅的方法可能是使用两个路径 - 一个静态的，一个动画的，并在需要时通过Javascript更改's href'属性。

是的，看起来通过JavaScript生成SVG是目前最好的解决方案。 - rampion
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接