<svg> <use> only displays in positive quadrant? - svg

Question

Failing to understand why only one quadrant is showing red color rather than the entire viewable area of the SVG? The same rect outside of use covers the entire area, what am I missing?
svg {
height: 50vmin;
border: solid 1px black;
transform: scale(1, -1);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 2 2">
<defs>
<symbol id="quadrant">
<rect x="-1" y="-1" width="2" height="2" fill="#f00"/>
</symbol>
</defs>
<rect x="-1" y="-1" width="2" height="2" fill="#0f0"/>
<use xlink:href="#quadrant" />
</svg>

Answer 1

The use element doesn't have x or y attributes so it starts at 0,0 and not -1, -1 as the prior rect does.
The symbol doesn't have a viewBox so the symbol displays from 0, 0 to 100%, 100% i.e. 1, 1 (since that's where the root viewBox says 100% maps to).
svg {
height: 50vmin;
border: solid 1px black;
transform: scale(1, -1);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 2 2">
<defs>
<symbol id="quadrant" viewBox="-1 -1 2 2">
<rect x="-1" y="-1" width="2" height="2" fill="#f00"/>
</symbol>
</defs>
<rect x="-1" y="-1" width="2" height="2" fill="#0f0"/>
<use x="-1" y="-1" xlink:href="#quadrant" />
</svg>
The alternative would be to just make the symbol's overflow: visible but I wouldn't recommend it as overflow: visible has terrible performance.