CODEWITHSUNDEEP
htmlanimationsvgweb
Аскер Чик
Аскер Чик

Reputation: 53

SVG animation waits for DOMLoad event, timelineBegin="onStart" is not working?

As explained in this page svg animation timeline starts with DOMLoad event has been triggered. But u can change it to svg's load by timelineBegin="onStart".

I want to use svg as a preloaded and it should start animation immidately. Why my animation still waits for DOMLoad event:

<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>

Upvotes: 1

Views: 938

Answers (1)

Jacob C.
Jacob C.

Reputation: 364

As Robert Longson commented, timelineBegin="onStart" is an attribute only defined for SVG 1.2 Tiny, and SVG 1.2 Tiny never got browser support. (SVG 1.1 Tiny SVGs should show up fine in all modern, full web browsers, but that's to be expected, because aside from the required version="1.1" baseProfile="tiny" attributes, those are the same as any other version 1.1 SVGs, except certain elements, attributes, and style properties are disallowed.)

However, if you want an alternative, it occurred to me that wrapping an SVG in an iframe could achieve a similar result. See https://jsfiddle.net/potsq649/

(There may be downsides to this depending on how you intended to use the SVG; e.g. this complicates script interaction with the SVG a bit, but that can still be done. If you use a data URI as I did in the example, URL-encode characters as needed, including any "#" characters, which need to be URL-encoded to %23 to avoid Firefox treating the text after that as a fragment identifier.)

Upvotes: 1

Related Questions