Question

我正在尝试为加载图标制作动画。我知道SVG中的动画标签不能在没有JS的polyfill的情况下在IE中工作，所以我正在避免这种情况并倾向于纯粹的CSS动画。 SVG包含的风格是它们都存在于一个中心区域，并且使用＆＃34;使用＆＃34;标记它们由ID调用以填充它们所需的位置。当它在页面上写入时，我能够对SVG进行动画处理，但是一旦我尝试使用USE标记调用它，它就无法在chrome中设置动画。还有其他人遇到过这个问题吗？

我在这里包含了我正在使用的CSS和HTML的代码。 svg中的每个行标记都根据其在html中的位置给出动画延迟，动画设置为更改不透明度。没有JAVASCRIPT

https://jsfiddle.net/mfeola/k7pqxp6c/

<div class="test">
  <svg viewBox="0 0 64 64" id="spinner-test">
    <title>spinner</title>
    <g stroke-width="4" stroke-linecap="round">
      <line y1="17" y2="29" transform="translate(32,32) rotate(180)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(210)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(240)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(270)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(300)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(330)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(0)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(30)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(60)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(90)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(120)"></line>
      <line y1="17" y2="29" transform="translate(32,32) rotate(150)"></line>
    </g>
  </svg>

  <svg>
    <use xlink:href="#spinner-test"></use>
  </svg>
</div>

SVG动画在使用标记时不起作用

0 个答案: