Ich habe das folgende Rechteck ...
<rect x="0px" y="0px" width="60px" height="20px"/>
Ich möchte das Wort "Fiktion" darin zentrieren. Wird bei anderen Rechtecken ein SVG-Zeilenumbruch verwendet, um in diesen zu bleiben? Ich kann anscheinend nichts spezielles zum Einfügen von Text in Formen finden, die sowohl horizontal als auch vertikal zentriert sind, sowie zum Zeilenumbruch. Außerdem kann der Text das Rechteck nicht verlassen.
Ein Blick auf das Beispiel http://www.w3.org/TR/SVG/text.html#TextElement hilft nicht, da sich x und y des Textelements von x und y des Rechtecks unterscheiden. Es scheint keine Breite und Höhe für Textelemente zu geben. Ich bin mir der Mathematik hier nicht sicher.
(Meine HTML-Tabelle wird einfach nicht funktionieren.)
Antworten:
Eine einfache Lösung, um Text in SVG horizontal und vertikal zu zentrieren:
Stellen Sie die Position des Texts auf die absolute Mitte des Elements ein, in dem Sie ihn zentrieren möchten:
x="50%" y ="50%"
.x
wäre dies dasx
Element + die Hälfte seiner Breite (und ähnlich für,y
aber mit der Höhe).Verwenden Sie die
text-anchor
Eigenschaft, um den Text horizontal mit dem Wert zu zentrierenmiddle
:Verwenden Sie die
dominant-baseline
Eigenschaft, um den Text vertikal mit dem Wert zu zentrierenmiddle
(oder je nachdem, wie er aussehen soll, möchten Sie dies möglicherweise tuncentral
)Hier ist eine einfache Demo:
quelle
dominant-baseline
Eigenschaft, die den Job erledigt, nicht diealignment-baseline
.<style type="text/css"><![CDATA[ text { alignment-baseline: middle; text-anchor:middle; } ]]></style>
. Danke für die Lösung.dominant-baseline
muss in der Tat verwendet werden. Es tut mir leid, aber diese Antwort ist irgendwie irreführend. Da es weder in Firefox noch in Chromium zu funktionieren scheint und Sie außerdem die Kommentare studieren müssen, um selbst die richtige Lösung zu finden, habe ich mir erlaubt, eine weitere Antwort mit Code hinzuzufügen, der wie erwartet funktioniert. (Für die Aufzeichnungen: Getestet mit FF und Chromium unter Ubuntu Linux.)alignment-baseline
, aber es scheint , dass es sich um eine skurrile Sache sein kann , weil die Spezifikationen überprüft, es sein solltedominant-baseline
fürtext
undalignment-baseline
fürtspan
,tref
,altGlyph
, undtextPath
. Ich habe die Antwort entsprechend aktualisiert.SVG 1.2 Tiny hat Textumbruch hinzugefügt, aber die meisten Implementierungen von SVG, die Sie im Browser finden (mit Ausnahme von Opera), haben diese Funktion nicht implementiert. In der Regel liegt es an Ihnen, dem Entwickler, den Text manuell zu positionieren.
Die SVG 1.1-Spezifikation bietet einen guten Überblick über diese Einschränkung und die möglichen Lösungen, um sie zu überwinden:
http://www.w3.org/TR/SVG11/text.html#Introduction
Als Grundelement kann der Textumbruch mithilfe des
dy
Attributs und dertspan
Elemente simuliert werden. Wie in der Spezifikation erwähnt, können einige Tools dies automatisieren. Wählen Sie in Inkscape beispielsweise die gewünschte Form und den gewünschten Text aus und verwenden Sie Text -> In Frame fließen. Auf diese Weise können Sie Ihren Text mit Umbruch schreiben, der basierend auf den Grenzen der Form umbrochen wird. Befolgen Sie außerdem diese Anweisungen, um Inkscape anzuweisen, die Kompatibilität mit SVG 1.1 aufrechtzuerhalten: http://wiki.inkscape.org/wiki/index.php/FAQ#What_about_flowed_text.3FDarüber hinaus gibt es einige JavaScript-Bibliotheken, mit denen das Umbrechen von Text dynamisch automatisiert werden kann: http://www.carto.net/papers/svg/textFlow/
Es ist interessant, die Lösung von CSVG zum Umschließen einer Form mit einem Textelement zu beachten (siehe z. B. das Beispiel "Schaltfläche"), obwohl zu erwähnen ist, dass die Implementierung in einem Browser nicht verwendet werden kann: http://www.csse.monash.edu .au / ~ clm / csvg / about.html
Ich erwähne dies, weil ich eine CSVG-inspirierte Bibliothek entwickelt habe, mit der Sie ähnliche Dinge tun können und die in Webbrowsern funktioniert, obwohl ich sie noch nicht veröffentlicht habe.
quelle
editable="true"
zum Text- oder textArea-Element abgerufen werden kann.Die vorherigen Antworten ergaben schlechte Ergebnisse bei Verwendung von abgerundeten Ecken oder
stroke-width
das ist> 1. Sie würden beispielsweise erwarten, dass der folgende Code ein abgerundetes Rechteck erzeugt, die Ecken werden jedoch von der übergeordnetensvg
Komponente abgeschnitten :Stattdessen empfehle ich, das
text
in ein zu wickelnsvg
und dann das Neuesvg
und dasrect
Zusammen in eing
Element zu verschachteln , wie im folgenden Beispiel:Dies behebt das Beschneidungsproblem, das in den obigen Antworten auftritt. Ich habe auch die Rect / Text-Gruppe mit dem
transform="translate(x,y)"
Attribut übersetzt, um zu demonstrieren, dass dies einen intuitiveren Ansatz für die Positionierung des Rect / Text auf dem Bildschirm bietet.quelle
Wenn Sie die SVG programmgesteuert erstellen, können Sie sie vereinfachen und Folgendes tun:
quelle
dominant-baseline
undtext-anchor
nichtdominantBaseline
undtextAnchor
?Sie können die
text-anchor = "middle"
Eigenschaft direkt verwenden . Ich empfehle, ein Wrapper-SVG-Element über Ihrem Rechteck und Text zu erstellen. Auf diese Weise können Sie das gesamte Element mit einem CSS-Selektor verwenden. Stellen Sie sicher, dass Sie die Texteigenschaften 'x' und 'y' als 50% platzieren.quelle
Vollständiges Detail-Blog: http://blog.techhysahil.com/svg/how-to-center-text-in-svg-shapes/
quelle
alignment-baseline
ist nicht das richtige Attribut, um hier zu verwenden. Die richtige Antwort ist die Verwendung einer Kombination ausdominant-baseline="central"
undtext-anchor="middle"
:quelle
Eine Möglichkeit, Text in ein Rechteck einzufügen, besteht darin, ein Fremdobjekt, das ein DIV ist, in ein direktes Objekt einzufügen.
Auf diese Weise entspricht der Text den Grenzen des DIV.
quelle
Ich hatte eine verdammte Zeit damit, mit SVG alles zu zentrieren, also rollte ich meine eigene kleine Funktion. hoffentlich sollte es dir helfen. Beachten Sie, dass dies nur für SVG-Elemente funktioniert.
quelle
Für die horizontale und vertikale Ausrichtung von Text in Grafiken möchten Sie möglicherweise die folgenden CSS-Stile verwenden. Beachten Sie insbesondere, dass dies
dominant-baseline:middle
wahrscheinlich falsch ist, da dies (normalerweise) auf halbem Weg zwischen der Oberseite und der Grundlinie und nicht auf halbem Weg zwischen der Oberseite und der Unterseite liegt. Einige Quellen (z. B. Mozilla ) verwendendominant-baseline:hanging
stattdessen anstelle vondominant-baseline:text-before-edge
. Dies ist wahrscheinlich auch falsch, dahanging
es für Indic-Skripte ausgelegt ist. Wenn Sie eine Mischung aus Latein, Indisch, Ideogrammen oder was auch immer verwenden, müssen Sie wahrscheinlich die Dokumentation lesen .Bearbeiten: Ich habe gerade bemerkt, dass Mozilla auch verwendet,
dominant-baseline:baseline
was definitiv falsch ist: Es ist nicht einmal ein anerkannter Wert! Ich gehe davon aus, dass standardmäßig die Schriftart verwendet wirdalphabetic
, also haben sie Glück gehabt.Mehr bearbeiten: Safari (11.1.2) versteht
text-before-edge
aber nichttext-after-edge
. Es schlägt auch fehlideographic
. Tolles Zeug, Apple. Sie könnten also gezwungen sein,alphabetic
Nachkommen zu verwenden und zuzulassen. Es tut uns leid.quelle