Textelement in SVG positioniert sich perfekt trotz festen Werten

Question

Ich war throught der Quelle Codee von circliful.js gehen und ich kam in den folgenden Codezeilen:

'<text class="timer" text-anchor="middle" x="' + textX + '" y="' + textY 
         + '" style="font-size: ' + settings.percentageTextSize + 'px; ' + additionalCss + ';' 
         + settings.textAdditionalCss + '" fill="' + settings.fontColor + '">0%</text>' 

gegeben, dass der Wert von textx und texty sind eine Konstante 175 bzw. 35, wie kommt es, dass, wenn die Breite des Kreises ändert, die Position des Symbols gleich bleibt.

Grundsätzlich ist die Codezeile oben ist der prozentuale Wert, den Sie in der FIDDLE HERE sehen, die 50% Sie in der Geige sehen, ist die obige Codezeile. So

wenn ich habe die unten CSS:

#circli { 
    max-width: 400px; 
} 

die Platzierung des 50% nach wie vor an der gleichen Stelle trotz der konstanten Werte von 175 und 35, auch wenn ich die CSS ändern wie folgt:

#circli { 
    max-width: 200px; 
} 

die Position des 50% ist immer noch die gleiche inspire der einen konstanten Wert von 175 und 35 hat, kann, warum jemand erklären?

Vielen Dank.

Answer 1

Die Elemente im SVG sind in einem konstanten Koordinatensystem definiert. Sie ändern nur die Größe des <div>, in dem sich das SVG befindet. Das SVG skaliert automatisch auf das div.

Das SVG skaliert, weil es eine viewBox hat. Die viewBox teilt dem Renderer die Grenzen des SVG-Dokuments mit und löst die automatische Skalierung aus. Wenn es kein viewBox hätte, würde es nicht automatisch in der Größe geändert werden.