MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Neben der Fähigkeit, Text auf einer Geraden Linie zu zeichnen, kann SVG diesen auch entlang der Form eines <path> Elements platzieren. Um von dieser Funktion Gebrauch zu machen, füge den gewünschten Text in einemtextPath Element mit einemxlink:href Attribut mit einer Referenz zu dem <path> Element.

Usage context

KategorienTextinhaltselement, Textinhaltskindelement
Erlaubter InhaltZeichendaten und eine beliebige Anzahl folgender Elemente in beliebiger Reihenfolge:
Beschreibende Elemente
<a>, <altGlyph>, <animate>, <animateColor>, <set>, <tref>, <tspan>

Example

<svg width="100%" height="100%" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="black" stroke-width="2" />
</svg>

Live result:

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGTextPathElement interface.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, modellking
 Zuletzt aktualisiert von: Sebastianz,