Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.</p> <p>One way is <a href="http://simurai.com/post/20251013889/svg-stacks" rel="noreferrer">SVG Stacks</a> which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.</p> <p>Another way might be to have a shapes.svg like this with all the drawings in different places</p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt; &lt;g transform="translate(0,0)"&gt; &lt;circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /&gt; &lt;/g&gt; &lt;g transform="translate(0,200)"&gt; &lt;rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /&gt; &lt;/g&gt; &lt;g transform="translate(0,400)"&gt; &lt;line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" /&gt; &lt;line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" /&gt; &lt;line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" /&gt; &lt;/g&gt; &lt;/svg&gt; </code></pre> <p>And then use svgView to show just the bits you want.</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px; height:100px" type="image/svg+xml" /&gt; &lt;embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/&gt; &lt;embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>All of these do mean though that you use more memory in the UA as the whole svg file is loaded 3 times and you just see a part of it each time.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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