Avoiding the clipping of symbols in SVG

Question

For my use it would be convenient for me to have a list of SVG symbols centered on zero, making their placement with use easier. For example a symbol which is simply a circle would have its center at zero and then a given radius. However with the standard clipping that clips away 3/4 of the circle. Here's an example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
     viewBox="0.0 0.0 230.0 150.0">
    <rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
    <symbol id="concentric">
        <circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
        <circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
    </symbol>   
    <use xlink:href="#concentric" x="20" y="20" />
    <use xlink:href="#concentric" x="40" y="20" />
    <use xlink:href="#concentric" x="60" y="20" />
</svg>

This will result in three uses of the symbol called "concentric" but since the original symbol has two circles at 0,0 three quarters of the symbol is clipped.

What is the easiest way of not clipping the symbols at 0 0?

Answer 1

You can use overflow="visible" to turn clipping off if you don't want it.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
     viewBox="0.0 0.0 230.0 150.0">
    <rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
    <symbol id="concentric" overflow="visible">
        <circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
        <circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
    </symbol>   
    <use xlink:href="#concentric" x="20" y="20" />
    <use xlink:href="#concentric" x="40" y="20" />
    <use xlink:href="#concentric" x="60" y="20" />
</svg>