Svg That Scales With Text Width

I'm trying to build a simple banner in SVG that will scale width as the text inside it is filled. Here is my current code: #container { height: 60px; position: relative; }

Solution 1:

Try giving #containerdisplay:inline-block so it shrinks to its children, then make the svg have position:absolute instead of the paragraph and also give it z-index:-1; to put it behind the paragraph. This is because your SVG element was defaulting to 300px, which you don't want to happen

Demo