Question

我有一个动画svg（like you can see here）在内联时有效...但是当我将svg转换为符号以便我可以使用xlink访问它时：href ...浏览器似乎剥离了来自svg的动画标签。

SVG内联：http://puu.sh/cLkTR/24db186e78.png

SVG符号引用：http://puu.sh/cLkZ7/51051612d3.png

无法找到关于这是否是预期行为的任何文档，因此请在此询问是否有人知道。谢谢:)）

修改

这是svg＆＃34; sprite sheet＆＃34;的片段。按照要求。 http://pastebin.com/3tUYueCj

这就是它包含在html中的方式：

<svg>
  <use xlink:href="sprites.svg#icon-loading.spinning.bubbles"></use>
</svg>

Answer 1

如果符号与use元素在同一文档中定义，则在Chrome 38中可以正常工作（请参阅下面的代码段）。

您使用的是Chrome的实验版吗？我没有看到Chrome DOM检查器中use元素的“影子根”定义 - 这可能是创建意外错误的新内容。 SVG使用元素并不直接等同于Web组件的阴影根。如果您尚未提交错误报告，则需要提交错误报告。

svg.defs {
  height: 0; width: 0; margin: 0; padding: 0; overflow: hidden;
}

svg.icon {
  height: 2em;
  width: 2em;
  margin: 0.5em;
}

<svg class="defs" xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 32 32" id="icon-loading.spinning.bubbles">
        <title>loading.spinning.bubbles</title>
        <circle cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
      <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
        <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
      </circle>
    </symbol>
</svg>

<svg class="icon"><use xlink:href="#icon-loading.spinning.bubbles"/></svg>

在符号中使用时，SVG SMIL动画被删除了吗？

1 个答案: