"negative value" error in SVG

[jinjor]

First of all, thanks for making a nice library!

I'm seeing an error in console when I make multiple elements in <svg>. This is a small example. (Can also be seem at CodePen)

const {bind, wire} = hyperHTML;

const el = document.body;
bind(el)`
  <svg viewBox='0 0 400 400'>
    ${[{}, {}, {}, {}].map((obj, i) => {
      const x = i * 30 + 20;
      const y = 20;
      const r = 3;
      return wire(obj, "svg")`<circle cx=${x} cy=${y} r=${r}></circle>`;
    })}
  </svg>`;

min.js:2 Error: <circle> attribute r: A negative value is not valid. ("-0.331666%")

It looks a comment <!---0.331666%--> generated at the bottom is problematic. A strange fact is that when I omit the last attribute r=${r}, no error message appears.

• hyperHTML@2.25.4
• Chrome and Safari (no error on Firefox)
• macOS

[WebReflection]

You can ignore that error, cause it's just a useless warning, but everything works as expected, by standards

[jinjor]

Ah okay, thanks!