We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

textPath

Springen zu:
  1. Usage context
  2. Example
  3. Attributes
  4. DOM Interface

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,