Html elements in svg seems in an incorrect order.

[Dodf]

When I use it in React to convert html to svg, some elements seems to be in wrong place. But I can not find reason, can u help me?
Code in my component is like that:

<div className='summaryCard'>
                    <div className='maxBox'>
                        <div className='infoBlock'>
                            <div className='leftItem'>
                                <span className='header'>aaa</span>
                                {summaryInfo.recommendation[0] ?
                                    <span title={summaryInfo.recommendation[0]} className='value'>{summaryInfo.recommendation[0]}</span>
                                    : <span className='value'>-</span>}
                            </div>
                            <div className='rightItem'>
                                <span className='header'>value</span>
                                {summaryInfo.recommendation[1] ?
                                    <span className='value'>
                                        <span className={summaryInfo.recommendation[1].indexOf('-') === -1 ? 'upTrangle' : 'downTrangle'}></span>
                                        <span title={summaryInfo.recommendation[1]} className={summaryInfo.recommendation[1].indexOf('-') === -1 ? 'upValue' : 'downValue'}>{summaryInfo.recommendation[1].replace(/-/, '')}</span>
                                    </span>
                                    : <span className='value'>-</span>}
                            </div>
                        </div>
                        <div className='maxTriangle'></div>
                    </div>
                    <div className='medBox'>
                        <div className='infoBlock'>
                            <div className='leftItem'>
                                <span className='header'>bbb</span>
                                {summaryInfo.action[0] ?
                                    <span className='value' title={summaryInfo.action[0]}>{summaryInfo.action[0]}</span>
                                    : <span className='value'>-</span>}
                            </div>
                            <div className='rightItem'>
                                <span className='header'>value</span>
                                {summaryInfo.action[1] ?
                                    <span className='value'>
                                        <span className={summaryInfo.action[1].indexOf('-') === -1 ? 'upTrangle' : 'downTrangle'}></span>
                                        <span title={summaryInfo.action[1]} className={summaryInfo.action[1].indexOf('-') === -1 ? 'upValue' : 'downValue'}>{summaryInfo.action[1].replace(/-/, '')}</span>
                                    </span>
                                    : <span className='value'>-</span>}
                            </div>
                        </div>
                        <div className='medTriangle'></div>
                    </div>
                    <div className='minBox'>
                        <div className='infoBlock'>
                            <div className='leftItem'>
                                <span className='header'>ccc</span>
                                {summaryInfo.attracting[0] ?
                                    <span className='value' title={summaryInfo.attracting[0]}>{summaryInfo.attracting[0]}</span>
                                    : <span className='value'>-</span>}
                            </div>
                            <div className='rightItem'>
                                <span className='header'>value</span>
                                {summaryInfo.attracting[1] ?
                                    <span className='value'>
                                        <span className={summaryInfo.attracting[1].indexOf('-') === -1 ? 'upTrangle' : 'downTrangle'}></span>
                                        <span title={summaryInfo.attracting[1]} className={summaryInfo.attracting[1].indexOf('-') === -1 ? 'upValue' : 'downValue'}>{summaryInfo.attracting[1].replace(/-/, '')}</span>
                                    </span>
                                    : <span className='value'>-</span>}
                            </div>
                        </div>
                        <div className='minTriangle'></div>
                    </div>
                </div>

but after I call

        rasterizeHTML.drawDocument(htmlContent, canvas, options).then(result => {
            const resultHolder = document.getElementById('placeHolder');
            resultHolder.innerHTML = result.svg;
        });

I got a svg which put div medBox minBox inside maxBox. What will be reason causing that?

[Dodf]

hi，I found the error is caused by function "convertElementToSvg". parameter xhtml is not correct, but still don't know real reason.

[cburgmer]

Happy to help if you can provide a minimal example to reproduce on my side.