Elements inside SVG don’t scale

[arturi]

Thank you for your work in bel and yo-yo 👍

Consider this SVG:

<svg width="140" height="140" viewbox="0 0 70 70">
  <circle cx="35" cy="35" r="30" stroke-width="3" fill="red" />
</svg>

The circle should scale up to fill SVG’s, according to its viewbox, but when the element is created with bel, circle doesn’t scale.

Live example: http://requirebin.com/?gist=32979ca8d3231e3a86ac872260fa3322 — the second element is created manually and scales like it should. In DOM they look identical, must be some SVG behind-the-scenes magic?

[shama]

Oh weird, so if you do viewbox="0 0 70 70" in the innerHTML the browser corrects the attribute to viewBox.

But since bel will do element.setAttribute('viewbox', '0 0 70 70') it will not correct the attribute.

The technical answer is use viewBox as that attribute is named with a capital B but I'm curious as to when/why the browser will correct attributes and when it will not, heh.

---

It looks like all SVG attributes are case sensitive.

[arturi]

Oh, thanks! Was not aware it’s actually viewBox. Do you think a warning should be added in docs or console?

[shama]

Added to the docs thanks!