viewbox и позиционирование значков в SVG

У меня просто очень простой svg ниже;viewbox и позиционирование значков в SVG

<div> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful"> 
    <g stroke="#ccc"> 
    <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line> 
    </g> 
    <g stroke="#ccc"> 
    <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line> 
    </g> 
    <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle> 
    <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle> 
    <text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text> 
    <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text> 
</svg> 

</div>

FIDDLE HERE

Окно видимости элемента является viewBox="0 0 194 300" SVG и атрибут на иконку y является y="110", мой вопрос, является Y намеренно 110 атрибут объявления ??

I.E. если я хотел центрирования значок я хотел бы сделать следующее:

(186/2)+ (height of icon/2) // 186 is the height of the viewbox

я прав в предположении, что значение 110 добавляется в отношении высоты ViewBox?

источник

2016-04-04 Alexander Solonik

Значение y, равное 110, будет выбрано автором для вертикального центрирования текста по кругу. Он напрямую не связан с viewBox. Это связано с центром круга, размером текста (22) и в некоторой степени формой глифов в любом шрифте. Например, высота заглавных букв может отличаться для разных шрифтов с одинаковым размером шрифта.

SVG не предоставляет никакого способа автоматически центрировать текст по вертикали. Таким образом, вы должны вручную позиционировать текст.

источник

2016-04-04 09:56:31

, поэтому основная причина выбора 110 заключается в том, что размер круга равен 100? и, конечно же, другие причины, о которых говорилось выше! –

Ничего общего с размером круга. Неважно, насколько большой круг. Здесь круг диаметром 114 (радиус = 57). Но это может быть 200, и координация y не изменится. Центр круга равен y = 100. Размер шрифта равен 22. Таким образом, базовая (y координата) текста будет равна примерно 100+ (22/2) = 111. Тогда, возможно, (как в этом случае) немного изменится из-за формы шрифта. –

Неа

dominant-baseline="central" 
x="100"

100 является вертикальным центром окружности (ry в окружности элемента) и dominant-baseline задает текст, Y координат к вертикальному центру текста.

источник

2016-04-04 00:41:23 seahorsepip

Да, я знаю об этом трюке, я просто говорю в приближении. :) –

Я просто хотел знать, что 110 был добавлен, имея в виду, что высота окна просмотра была 186! :) –

Высота окна просмотра в jsfiddle составляет 300:/ – seahorsepip

viewbox и позиционирование значков в SVG

ответ

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