Question

我使用符号在SVG文件中定义了旋转矩形。该文件名为my.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100">
    <defs>
        <symbol id="hey">
            <rect x="150" y="20" width="60" height="60" fill="blue">
                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 180 50" to="360 180 50" dur="4s" repeatCount="indefinite" />
            </rect>
        </symbol>
    </defs>
</svg>

我在我的html文件中使用svg来包含它。

<svg>
    <use xlink:href="my.svg#hey"></use>
</svg>

会发生什么，animateTransform元素消失了，矩形不会旋转。

我已经在许多浏览器和服务器类型上验证了这一点。我不明白它被丢弃的原因。我可以将animateTransform复制粘贴回svg use元素，因此它不像是不受支持 - 只是在通过{{1}调用时由于某种原因被移除}。

我发现根据我的小提琴本地定义的情况并非如此。

http://jsfiddle.net/27jozv8L/

当我使用use时，如何保留animateTransform元素？

在firefox中，整个事情都在旋转，在chrome中没有任何反应。

Answer 1

Chrome现在还有问题??? 我更新我的答案 :( TY to @ccprog）
SMIL在这个时刻使用浏览器FF＆amp; GC＆amp; Safari ..但不适用于IE＆amp; Edge
和Not currently planned。（https://caniuse.com/#feat=svg-smil）
我的下面的例子使用CSS，也适用于Edge以及关于你的代码..可能是Chrome本地的麻烦？如果不起作用查看Flag to disable SMIL support（见下文）

例如关于CSS：

<!DOCTYPE html>
<html>

<head>
  <title>.</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" />

  <style>
    .loader {
      position: relative;
      top: 20px;
      left: 150px;
      height: 60px;
      width: 60px;
      background-color: #00f;
      -webkit-animation: spin 1200ms infinite linear;
      -moz-animation: spin 1200ms infinite linear;
      animation: spin 1200ms infinite linear;
    }
    
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
    }
    
    @-moz-keyframes spin {
      from {
        -moz-transform: rotate(0deg);
      }
      to {
        -moz-transform: rotate(359deg);
      }
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }
  </style>
</head>

<body>
  <div class="loader"></div>
</body>

</html>

Google已决定不再在其Chrome浏览器中支持该标记语言。那些在Chrome 45上打开带有SMIL动画的SVG图形的人会看到一个屏幕，上面写着SMIL已被弃用，你应该切换到CSS或网络动画。
(Aug 18 2016 Google Removed SMIL deprecation warning)

2015年6月10日星期三04:13:40 UTC
  https://codereview.chromium.org/1158563006
  添加SMIL弃用警告

  周一7月27日07:51:01 UTC
  https://codereview.chromium.org/1251983005
  标记以禁用SMIL支持
  作者可以使用命令行标志--disable-blink-features = smil to   禁用SMIL功能。

  2016年8月18日16:58:09
  https://codereview.chromium.org/2256013003
  删除SMIL弃用警告

2015年7月27日星期一
https://blog.chromium.org/2015/07/chrome-45-beta-new-es2015-features.html
在Chrome 45（45.0.2454.85）中有一个弃用警告根据警告：
SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

浏览器测试支持SMIL（https://modernizr.com/download#setclasses&q=SVG+SMIL+animation）
替代指南
https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/

对于将来的项目，可以使用其他动画选项和库，例如SVG.js或Snap.svg或D3或Vanilla JS。

...或使用ECMAScript(JS)。

来自Microsoft的

SVG Animation in IE9

使用SVG时，SVG animateTransform标记会丢失

1 个答案: