избежать отсечение символов в SVG

Для моего использования было бы удобно для меня, чтобы иметь список SVG символов сосредоточенных на нуле, что делает их размещение с использования проще. Например, символ, который представляет собой просто круг, будет иметь свой центр в нуле, а затем заданный радиус. Однако со стандартным отсечением, которое снимает 3/4 круга. Вот пример:избежать отсечение символов в SVG

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

источник

2013-11-14 Owen Ransen

Вы можете использовать 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-14 15:40:23

Удивительно, но я обнаружил это просто грубыми экспериментами несколько секунд назад. Хотя приятно иметь решение, подтвержденное экспертом ane, большое спасибо! –

Я только что заметил разницу между вашим решением и моим. Являются ли они такими же: overflow = "visible and overflow:" visible? –

SVG сопоставляет многие атрибуты стилям, поэтому они почти одинаковы, за исключением того, что имеют различную спецификацию CSS, которая не влияет на этот прецедент. –

избежать отсечение символов в SVG

ответ

Смежные вопросы