Hello… So, I’ve finally managed to figure out a way to do the responsive animation (SVG ended up providing a good solution, after I tried several other methods). Works excellent on my system.
But, the only thing that concerns me at this point, is browser/platform support.
So, I’m wondering if someone could tell me how support for the following is these days, and if there’s any quirks or things I should be aware of:
-The < SVG > tag itself
-The SVG < IMAGE > tag and its x/y properties (for putting raster images within the SVG tag/canvas)
-The < SVG > VIEWBOX property (…I know IE breaks it if you try and put the SVG in a table, but I won’t be doing that)
So, if someone could tell me the current support for that, it would be very helpful. There is no real data for the viewbox property in caniuse, so I couldn’t look it up myself. The SVG tag itself seems nicely supported, and I THINK the IMAGE tag is, too… although I’m not sure if the one I’m seeing in caniuse is the same one that is used in SVG.
Ya, I was recently introduced to the Mozilla site for tag definitions/samples… but I never saw the compatibility section. How do you get to that from within Mozilla? Those browser charts you pointed me to are great. I didn’t know they existed.
Ha! Internet Explorer is NEVER my friend… It seems you can almost always count of IT being the one who does things differently (proprietary), or has odd quirks/errors/limitations, or generally doesn’t support whatever it is you want to do. It’s like, with them, up is down… so you have to write some additional support code to make it work.
It actually looks like SVG (and the related items I listed) ARE actually supported. That last chart is actually for ‘view’, which I’m not using. It’s confusing, as there is a ‘viewport’ for both ‘view’ and ‘svg’. Viewport is a property, and both the SVG and VIEW tags have it, but it’s just the VIEW tag’s viewport property that isn’t supported… in fact, the VIEW tag itself seems pretty much unsupported.
That viewport property was the final key to unlocking a method of having a ‘canvas-like’ container (where I don’t have to rely on absolute positioning hacks, which break the flow) which will actually have ALL the content (including the animation itself, like the distance traveled), scale as one item in a responsive container. I tried everything from relative/absolute positioning, Canvas, and now finally SVG… and SVG finally presented the solution. Works perfectly, at least on my system. It’s just a matter of whether it will break on some other browser/platform… but the chart looks promising. I’ll have to see in real-world tests myself, though.