1

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>
Аскер Чик
  • 53
  • 1
  • 5
  • 2
    No current browser supports SVG 1.2 tiny. – Robert Longson Nov 27 '17 at 20:16
  • 1
    @RobertLongson It seems unfortunate that this wasn't included among the isolated, cherry-picked features that (as [you previously mentioned](https://stackoverflow.com/a/40957325/8067821)) were supported. It seems like a very sensible feature to have in even normal SVGs, but it doesn't seem to be making it into [SVG 2](https://www.w3.org/TR/SVG2/struct.html) either. – Jacob C. Nov 27 '17 at 20:49

1 Answers1

1

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

Jacob C.
  • 345
  • 1
  • 16