4

私の使用では、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>

これにより、「同心」と呼ばれるシンボルが 3 回使用されますが、元のシンボルには 0,0 に 2 つの円があるため、シンボルの 4 分の 3 が切り取られます。

シンボルを 0 0 でクリッピングしない最も簡単な方法は何ですか?

4

1 に答える 1

10

必要ない場合は、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>
于 2013-11-14T15:40:23.390 に答える