Zentrierentext im SVG-Kreis

Ich habe verschiedene Lösungen hier in StackOverflow für ein Problem wie dieses vergeblich überprüft. Für das Leben von mir weiß ich nicht, was nicht funktioniert.Zentrierentext im SVG-Kreis

Sie fragen sich vielleicht, "warum ein SVG verwenden". Ich muss einen Kreis in HTML erstellen und über ein Banner positionieren, das ist für einen Kunden. Ich habe festgestellt, dass das Erstellen einer SVG-Form der beste Weg ist, einen solchen Kreis zu erstellen. Dies ist meine aktuelle SVG:

<svg xmlns="http://www.w3.org/2000/svg"> 
<circle cx="40" cy="40" r="40" fill="#472e12" /> 
    <foreignobject x="20" y="20" width="20" height="20"> 
    <style> 
     p { text-anchor:middle;} 
    </style> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
    <div> 
     <p>Text in two lines</p> 
    </div> 
    </body> 
</foreignobject> 
    </svg>

Und hier ist die CSS für sie:

svg{ 
     position: absolute; 
     left: 20px; 
     bottom: 40px; 
    }

Es ist ein kleiner brauner Kreis und es sollte einen Text in zwei Linien, zentriert, in weiß haben.

Quelle

2017-06-25 vester

Haben Sie mehr als 2 Zeilen benötigen? – JSmith

Nein, nur zwei. Ich sollte ein Wort in der ersten Zeile und ein weiteres Wort in der zweiten Zeile haben, beide zentriert. – vester

lassen Sie mich das sehen – JSmith

Um Ihren Text über mehrere Zeilen zu verteilen, müssen Sie <tspan> verwenden. Um den Text weiß zu machen, müssen Sie ihm stroke oder fill#fff geben. Ich bin mit fill gegangen, um es schärfer zu machen. Wie für den Text selbst, können Sie finden es einfacher, nur <text> zu verwenden, und tun etwas Ähnliches wie die folgenden:

<svg width="200" height="100"> 
 
    <circle cx="40" cy="40" r="40" fill="#472e12" /> 
 
    <text x="50%" y="30%" text-anchor="middle" fill="#fff" dy=".3em"> 
 
    <tspan x="20%" dy=".6em">Text In</tspan> 
 
    <tspan x="20%" dy="1.2em">Two Lines</tspan> 
 
    </text> 
 
</svg>

hoffe, das hilft! :)

Quelle

2017-06-25 22:53:10

Gute Eins. Sie können 'fill =" # fff "' anstelle von stroke verwenden, um den Text schärfer zu gestalten ... –

Aktualisiert, um stattdessen 'fill' zu verwenden :) –

omg das hat wie ein Zauber funktioniert! vielen herzlichen Dank. Die Frage, die ich habe, ist: Warum 30% statt 50% in der Y-Achse - was ich denke, wäre das logischste was ich denke? – vester

Hier hängt die y Position von text stark von dem font-size Attribut ab.

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="40" cy="40" r="40" fill="#472e12" /> 
 
    <text x="40" y="40" fill="#FFF" font-size="20px" text-anchor="middle" > 
 
     1 line 
 
    </text> 
 
    <text x="40" y="60" fill="#FFF" font-size="20px" text-anchor="middle"> 
 
     2 line 
 
    </text> 
 
</svg>

Quelle

2017-06-25 23:20:14 JSmith

Das hat auch funktioniert! Danke mann. Ich denke, das ForeignObject hat mich getötet haha – vester

Kein Problem, solange es dir geholfen hat, bin ich glücklich – JSmith

Zentrierentext im SVG-Kreis

Antwort

Verwandte Themen