It appears that <amp-script>
code lowercases all the dynamically added HTML attributes but that seems to break the viewBox attribute for SVG tags.
For example if you have
document.appendChild(
'<svg height="100" width="100" viewBox="0 0 10 10"> <circle class="smile" cx="5" cy="5" r="4" stroke-dashoffset="-.5" stroke-dasharray="11.5,13.6327" /> <circle class="eyes" cx="5" cy="5" r="4" stroke-dashoffset="-15.5" stroke-dasharray="0,6.6327,0,17.5" /> </svg>'
);
But the source that gets appended has
viewbox="0 0 10 10"
Notice that viewbox is lowercased which seems to not work.
Does anyone know if <amp-script>
lowercases all attributes?
And how to make viewBox work in <amp-script>
Here's a reference to an old discussion about viewBox being case sensitive https://github.com/sveltejs/svelte/issues/1062
The code builds a svg string
then appends to the document.
p.innerHTML = '<svg ...';
document.appendChild(p);
`); not sure it will work if it's a URL.
– Jay Gray Feb 08 '22 at 21:20