I have a HTML5 page that calls an SVG file via object:
<object data="cape.svg" type="image/svg+xml" style="max-width:100%;height:auto;">
</object>
Inside the SVG file is a basic image plus some JavaScript:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 450"
xml:space="preserve">
<script>
alert("Test");
</script>
<image overflow="visible" width="1200" height="450" xlink:href="cape-reinga.jpg">
</image>
</svg>
On desktop browsers, including Safari, the JavaScript in the SVG file works as expected. On mobile, the JS seems to be completely ignored. (Wrapping the JS code in CDATA makes no difference, adding type="text/javascript" makes no difference).
Inlining the SVG is likely not an option for what I have planned: any idea why embedding the JS code in an object would prove so troublesome in iOS?
Thanks in advance!