SVG 动画等待 DOM Load 事件，时间线 Begin="onStart" 不起作用？答案

【问题标题】：SVG animation waits for DOMLoad event, timelineBegin="onStart" is not working?SVG 动画等待 DOM Load 事件，时间线 Begin="onStart" 不起作用？
【发布时间】：2018-05-11 02:34:25
【问题描述】：

正如page svg 动画时间线中所解释的，以 DOMLoad 事件开始。但是你可以通过timelineBegin="onStart"把它改成svg的负载。

我想使用 svg 作为预加载，它应该立即开始动画。为什么我的动画还在等待 DOMLoad 事件：

<svg id="map" version="1.2" width="100%" viewbox="-2 -2 506.3302 339.85639" xmlns:svg="http://www.w3.org/2000/svg" timelineBegin="onStart">
    <defs>
        <radialgradient id="grad1" cx="0.65" cy="0.78" r="0.08" rx="0.5" ry="1">
            <stop offset="0.8" style="stop-color: #1a1a1a; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
            <animate id="map-animation" attributeName="r" dur="2500ms" from="0.08" to="1.2" fill="freeze"/>
        </radialgradient>
    </defs>
    <path id="map" fill="url(#grad1)" d="m733.83-66.9...>
</svg>

【问题讨论】：

当前没有浏览器支持 SVG 1.2 tiny。
@RobertLongson 不幸的是，这似乎不包括在支持的孤立的、精心挑选的功能中（如you previously mentioned）。即使在普通的 SVG 中，它似乎也是一个非常明智的功能，但它似乎也没有成为 SVG 2。

标签： html animation svg web

【解决方案1】：

正如 Robert Longson 评论的那样，timelineBegin="onStart" 是仅为 SVG 1.2 Tiny 定义的属性，而 SVG 1.2 Tiny 从未获得浏览器支持。（SVG 1.1 Tiny SVG 应该在所有现代、完整的 Web 浏览器中都能正常显示，但这是意料之中的，因为除了必需的 version="1.1" baseProfile="tiny" 属性之外，这些与任何其他 1.1 版 SVG 相同，除了某些元素、属性、和样式属性是不允许的。）

但是，如果您想要一个替代方案，我想到将 SVG 包装在 iframe 中可以达到类似的效果。见https://jsfiddle.net/potsq649/

（根据您打算如何使用 SVG，这可能会有缺点；例如，这会使脚本与 SVG 的交互变得有点复杂，但是 can still be done。如果您像我在示例中所做的那样使用数据 URI，根据需要对字符进行 URL 编码，包括任何“#”字符，需要将其 URL 编码为 %23，以避免 Firefox 将其后的文本视为片段标识符。）

【讨论】：