SVG: dynamic size based on text, merging objects <pre><code>&lt;div style="float: left; padding: 10px; border: 1px solid; background: #ccc"&gt;random text&lt;/div&gt; </code></pre> <p>Is there a way to achieve something like this in SVG? I mean to have a rectangle and a text and:</p> <p>a) rectangle's width and height are dynamic, so when I change the text, the rectangle adjust its size<br> b) when I move the rectangle, the text goes with it</p> <p>And would it be easier to achieve something like this in <code>&lt;canvas&gt;</code>?</p> <p><strong>EDIT:</strong></p> <pre><code>&lt;defs&gt; &lt;text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;"&gt; THIS IS MY HEADER&lt;/text&gt; &lt;/defs&gt; &lt;filter x="0" y="0" width="1" height="1" id="background"&gt; &lt;feFlood flood-color="gray"/&gt; &lt;feComposite in="SourceGraphic"/&gt; &lt;/filter&gt; &lt;use xlink:href="#text1" fill="black" filter="url(#background)"/&gt; </code></pre> <p>Erik Dahlström proposed something like this. How to put padding to the background, how to add eg. shadow or border to the rectangle? And, this doesn't work in IE9, so I cannot accept it. I could just use <code>&lt;foreignObject&gt;</code> if there was a support for it in IE.</p> <p>And I just figured out the <strong>answer for b) point of my question</strong>. You have to put both elements in the group:</p> <pre><code>&lt;g&gt; &lt;rect x="0" y="0" width="100" height="100" fill="red"&gt;&lt;/rect&gt; &lt;text x="50" y="50" font-size="14" fill="blue" text-anchor="middle"&gt;Hello&lt;/text&gt; &lt;/g&gt; </code></pre> <p>And then you can move the group using <code>transform</code> param:</p> <pre><code>&lt;g transform="translate(x, y)"&gt; </code></pre> <p>Seems to work correct in every browser.</p>