Hi, RobM. Thanks for that.
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.