StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The first and probably best method you could use is just using the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox" rel="noreferrer"><code>viewBox</code></a> attribute. That will make the contents of the svg tag automatically take up the defined width and height of the svg tag itself, by only showing what's within the defined boundaries. For example:</p> <pre><code><svg width="82" height="82" viewbox="0 0 102 102"> <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/> <text fill="black" x="10" y="30">FooBarBaz</text> </svg> </code></pre> <p>Alternatively, you could apply a svg <code>transform</code> to the contents of the SVG tag, which would look like this:</p> <pre><code><svg width="82" height="82"> <g transform="scale(0.8)"> <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/> <text fill="black" x="10" y="30">FooBarBaz</text> </g> </svg> </code></pre> <p>Finally, you can try using CSS3 <code>transform</code> to scale the whole svg element. This is the least supported method, but I mention it anyway because you originally asked for a CSS solution. I strongly suggest using one of the above solutions though, if that's possible at all.</p> <pre><code><svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);"> <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/> <text fill="black" x="10" y="30">FooBarBaz</text> </svg> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload