Viewbox und Symbol Positionierung in SVG

Ich habe gerade diese sehr einfache Svg unten;Viewbox und Symbol Positionierung in 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

Das Sichtgerät des svg Elements ist viewBox="0 0 194 300" und das y Attribut auf dem Symbol ist y="110", ist meine Frage, ist der Y attibute absichtlich 110 ??

I.E. wenn ich das Symbol zum Zentrum wollte, würde ich folgendes tun:

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

Bin ich richtig in der Annahme, dass der Wert von 110 ist in Bezug auf die Höhe der Sichtgerät hinzugefügt?

Quelle

2016-04-04 Alexander Solonik

Der y-Wert von 110 wurde vom Autor gewählt, um den Text im Kreis vertikal zu zentrieren. Es ist nicht direkt mit der ViewBox verbunden. Es bezieht sich auf die Mitte des Kreises, die Größe des Textes (22) und teilweise auf die Form der Glyphen in welcher Schriftart auch immer. Zum Beispiel kann die Höhe von Großbuchstaben für verschiedene Schriftarten bei gleicher Schriftgröße variieren.

SVG bietet keine Möglichkeit, Text automatisch vertikal zu zentrieren. Sie müssen den Text also manuell positionieren.

Quelle

2016-04-04 09:56:31

so ist der Hauptgrund für die Wahl von 110, weil die Größe des Kreises 100 ist? und natürlich die anderen Gründe, die du erwähnt hast! –

Nichts mit der Größe des Kreises zu tun. Es spielt keine Rolle, wie groß der Kreis ist. Hier hat der Kreis einen Durchmesser von 114 (Radius = 57). Aber es könnte 200 sein und die y-Koordinate würde sich nicht ändern. Der Mittelpunkt des Kreises ist bei y = 100. Die Schriftgröße ist 22. Also wäre die Grundlinie (y-Koordinate) von Text bei ungefähr 100+ (22/2) = 111. Dann vielleicht (wie in diesem Fall) ein wenig aufgrund der Form der Schriftart angepasst. –

Nope

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

100 ist der vertikale Mittelpunkt des Kreises (ry im Kreiselement) und dominant-baseline legt der Text Y auf die vertikale Mitte des Textes koordinieren.

Quelle

2016-04-04 00:41:23 seahorsepip

ja ich bin mir des Tricks bewusst, ich spreche nur in approximates. :) –

Ich wollte nur wissen, dass 110 hinzugefügt wurde, da die Höhe der Viewbox 186 war! :) –

Die Höhe der Viewbox in der jsfiddle ist 300:/ – seahorsepip

Viewbox und Symbol Positionierung in SVG

Antwort

Verwandte Themen