SVG rect as background to text

Asked Sep 05 '17 at 00:30

Active Sep 05 '17 at 00:44

Viewed 35 times

I have the following in an SVG:

<g transform="translate(1420 1030)">
<rect x="0" y="0" width="300" height="36" class="user-1"></rect>
<image id="my-user-avatar" x="3" y="3" width="30" height="30" xlink:href="/img/user/default-avatar.png"/>
<text id="my-user-nickname" x="40" y="23">USER</text>
</g>

If the text is greater than a certain number of letters it overflows the rect.

How do I generate in SVG the effect of a div with a background color where it grows in width based on its content, and keeps a padding to the right of 3px?

edited Sep 05 '17 at 00:44

Aydin4ik

1,782
1
14
19

asked Sep 05 '17 at 00:30

TheRealPapa

4,393
8
71
155

Can we have an absolute URL to the image please? – Aydin4ik Sep 05 '17 at 00:35
Hi @Aydin, I do not understand the Q. – TheRealPapa Sep 05 '17 at 00:36
@TheReapPapa /img/user/default-avatar.png - URL to this image – Aydin4ik Sep 05 '17 at 00:37
I still do not understand. The image is on my dev server. Why is the absolute url important? – TheRealPapa Sep 05 '17 at 00:39

SVG rect as background to text

0 Answers0