3

出于某种原因，我的 spinner.svg 在使用xlink:href. 将 SVG 嵌入页面并使用xlink:href似乎可以正常工作，如下面的代码片段所示。

问题：静态（和实心！）微调器而不是动画

实心的微调器 - 没有动画

为什么SVG的动画标签突然不生效了？参考必须有效，因为图像实际上正在显示。

编辑：这可能与阴影 dom 和外部参照有关吗？ 根据 Sara Soueidan “目标元素必须是当前 SVG 文档片段的一部分”。我可能会超载“文档片段”的含义，但对我来说，文档片段属于 Shadow DOM 领域，我怀疑 SMIL 动画可能因此在使用语句时不起作用<use>？

工作版本

.xlinked {
  color: green;
}

img {
  color: red; // not taking effect - of course! just a test.
}

.embedded {
  color: blue;
}
  
<h1>xlink local</h1>
<svg class="xlinked">
    <!-- could not get this external reference to work?
    <use xlink:href="http://imgh.us/spinner_1.svg" />
    -->
    <use xlink:href="#spinner" />
</svg>

<h1>embedded</h1>
<div class="embedded">
    <svg id="embedded"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
        <circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
        <circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
            <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
            <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
        </circle>
    </svg>
</div>

<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />

<h1>External absolute xlink (not working)</h1>
<svg>
    <!-- could not get this external reference to work. should be the same as a local reference?  -->
    <use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>

<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>

4

1 回答 1

1

在 SVG1.1 中，使用元素需要引用 SVG 片段而不是 SVG URL。尝试将 id 属性添加到外部 SVG 文件的根 svg 元素，并将哈希字符串添加到 use 元素的 href 值，如下所示。

外部 svg（spinner_1.svg）

<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>

html 使用外部 SVG 文件

<svg>
    <use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>

注意：在 SVG2 中，您可以将 SVG URL 设置为 use 元素的 href 属性。见https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement

于 2017-02-15T11:54:25.860 回答