CODEWITHSUNDEEP
javascriptsvgvirtual-dom
aqui8
aqui8

Reputation: 560

How do I define svg attributes in virtual-dom?

Is there a way to add svg attributes to nodes using virtual-hyperscript in virtual dom? For example, something like this:

var h = require('virtual-dom/h')

h('svg', [
    h('circle', {cx: 100, cy: 100}, 'some text')
])

I've tried to do this myself, but the attributes are removed on create.

Upvotes: 0

Views: 848

Answers (1)

aqui8
aqui8

Reputation: 560

Turns out you do this:

h('circle', {namespace: "http://www.w3.org/2000/svg", attributes: {cx: 100}})
  • Need the attributes key
  • Need the namespace - this is because the browser treats createElement and createElementNS as two different things even though they output the same html. Namespace is needed to differentiate it from a normal DOM element.

See: https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript#namespace

Upvotes: 2

Related Questions