svgで画像に文字を入れる

こうなっている

code:html

<svg viewBox="0 0 500 500" width="500" height="500">

<image

x="0" y="0" width="500" height="500"

xlink:href="data:image/png;base64,...">

</image>

<style>

.a {

text-align: right;

}

a {

font-family: 'Courier New';

cursor: pointer;

text-decoration: none;

font-size: 25px;

font-weight: bold;

margin-right: 7px;

}

a:hover {

text-decoration: underline;

text-shadow: 0 0;

}

</style>

<div class="a">

</div>

</html>

</foreignObject>

</svg>

例