SVG Scaling Text passend zum Container

Dies ist wahrscheinlich eine sehr einfache Frage, aber wie bekomme ich text in SVG zu Strecken, um seine container?

Ist mir egal, wenn es sieht hässlich aus gedehnt zu lange oder zu hoch, aber es muss passt seine container und so groß wie möglich sein.

Dank

InformationsquelleAutor der Frage Tom | 2010-05-30

  1. 19

    Wenn Sie wirklich nicht kümmern, dass der text bekommt hässlich, hier ist, wie zu passen, Länge unbekannt text in einer bekannten Breite.

    <svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <g>
        <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
    </g>
</svg>

    SVG Scaling Text passend zum Container

    InformationsquelleAutor der Antwort Bemmu

  2. 8

    Vielleicht könnte dies für Sie arbeiten. Sie müssten, um zu zwicken, die Werte, aber es hat Größe, wenn der übergeordnete div-Größe. Hier ist meine dabblet Beispiel. Es funktioniert ähnlich wie fittext.js

    Benutzte ich die 'viewBox' & 'preserveAspectRatio' Attribute.

    <svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>

    andere Ressourcen, die ich sah:

    InformationsquelleAutor der Antwort Stoikerty

Schreibe einen Kommentar