Unable to dynamically set className on SVG element

[sebastiansandqvist]

Description:

I have an SVG Icon component which is itself just m('svg.Icon', vnode.attrs, vnode.children). When attrs contains a className (in order to add a dynamic className besides Icon) an error is thrown, but not initially. It works fine until onupdate.

Seems like it could be a simple fix:
adobe-webplatform/Snap.svg#414
If the comments there are true, it's just a matter of using setAttribute or className.baseVal when the element is an svg.

Steps to Reproduce:

const Icon = {
  view(vnode) {
    return m('svg.Icon', vnode.attrs, vnode.children);
  }
};

const FooIcon = {
  view(vnode) {
    return m(Icon, {className: 'foo'}, m('path', {d: '' }) ); // empty path for simple demo
  }
};

Expected:

SVG element should have className of Icon foo

Actual:

Uncaught TypeError: Cannot set property className of #<SVGElement> which has only a getter

https://github.com/lhorie/mithril.js/blob/rewrite/mithril.js#L532

[lhorie]

Fixed in 693c87f