Adding image to <tspan>

993 views Asked by At

I have this code:

<svg>
    <text>
        <tspan x='8' dy='16' id='china'>" + ¥5,000.00 + "</tspan>
    </text>
</svg>

This shows me this: ¥5,000.00

What I want is to show me with China flag, like this: enter image description here Tried many ways, but can't. One was like:

<tspan x='8' dy='16' id='china'><img src='https://i.stack.imgur.com/INxnl.png'  width='20px' height='20px'>" + ¥5,000.00 + "</tspan>
1

There are 1 answers

0
Droid Chris On

So it appears that this <tspan> tag should only be part of a text element...

Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a tspan element. ... The attribute rotate was implemented in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1).

So perhaps you need to do move the <img> tag outside of the text element.

Here is the HTML I just parsed:

<html>
    <body>
        <img src='https://i.stack.imgur.com/INxnl.png'  width='600px' height='100px'>
    </body>
</html>

The image tag loads the following image:

enter image description here

The image includes the text.