How to insert an svg using backdraft js

Question

This doesn't seem to display:

class RedCircle extends Component {
    bdElements() {
        return e.div({
            style: {width: '200px', height: '200px', border: '1px solid black'}
        },
            e('svg', {width:100, height: 100},
                e('circle', {cx: 50, cy: 50, r: 40, fill: 'red'})
            ),
        )
    }
}

...though in console I can see the markup:

<div style="width: 200px; height: 200px; border: 1px solid black;">
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red"></circle>
    </svg>
</div>

Possibly it needs to use createElementNS instead of createElement? Not sure how to do that though.

Answer 1

Ah, found the answer. https://backdraftjs.org/docs.html#bd-core.functions.svg

Use the svg function rather than e:

class RedCircle extends Component {
    bdElements() {
        return e.div({
            style: {width: '200px', height: '200px', border: '1px solid black'}
        },
            svg('svg', {width:100, height: 100},
                svg('circle', {cx: 50, cy: 50, r: 40, fill: 'red'})
            ),
        )
    }
}