1

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);
Ralph Yozzo
  • 1,086
  • 13
  • 25
  • Which JS function are you using that invokes `retval`? IOE only JS functions that (basically) involve a user gesture seem to work. While you can use `fetch` in `amp-script` I've never seen an example that forms an SVG string. Alternatively, you can link an SVG item that is declared in a sprite-like structure (using id=). The sprite needs to be inline (can be after `

    `); not sure it will work if it's a URL.

    – Jay Gray Feb 08 '22 at 21:20
  • @JayGray Thanks but the retval is simply a string that contains ' ... ' and then it uses document.appendChild. I'll update the question – Ralph Yozzo Feb 09 '22 at 00:46
  • 1
    It appears to be an xml vs html issue. See https://stackoverflow.com/questions/28734628/how-can-i-set-an-attribute-with-case-sensitive-name-in-a-javascript-generated-el/28734954 – Ralph Yozzo Feb 09 '22 at 03:17
  • My best idea is to invoke the id from this structure: ` ` – Jay Gray Feb 09 '22 at 11:31

0 Answers0