svg - 避免在SVG中裁剪符号

Question

对于我的使用，将SVG 符号的列表以零为中心对我来说很方便，从而使它们在中的放置更容易使用。例如，仅是一个圆形的符号的中心将为零，然后是给定的半径。但是，使用标准剪裁可剪掉3/4的圆。这是一个例子:

<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>

这将导致符号“同心”的三种用法，但是由于原始符号在0,0处有两个圆，因此该符号的四分之三被裁剪了。

不将符号剪裁为0 0的最简单方法是什么？

Answer 1

如果不需要，可以使用overflow =“visible”关闭剪辑。

<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>