SVG - Text ins Polygon schreiben - Multiline, Center und Transparent

  • Sonstige

    SVG - Text ins Polygon schreiben - Multiline, Center und Transparent

    Hallo, :D

    bin gerade dabei ein text in ein Polygon zu generieren.

    Was ich habe ist das, als Vorlage


    als erstes habe ich es per SVG propiert, nur dort hab ich nichts passendes gefunden (bin SVG noob [noch nie wirklich damit gearbeitet]),
    dann bin ich aber auf clip-path (css) gestoßen.
    Dachte mir dann: "Easy, einfach border drauf, fertig und mit css den text in die Mittte bewegen",
    nun hab ich durch den Post erfahren stackoverflow.com/a/31854299, dass es nicht möglich ist ein Border auf dein Clip-Path zu setzen, also zurück zum SVG

    Mein SVG code sieht wie folgt aus für das Polygon

    Quellcode

    1. ​<svg width="100%" height="100%" viewBox="-1 -1 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.41421;">
    2. <g>
    3. <polygon id="none" points="2,0 6,0 8,3.5 6,7 2,7 0,3.5 2,0" style="fill:none;stroke:#ed1c24;stroke-width: 0.35px;"/>
    4. </g
    >

    jetzt noch den Text einfügen und fertig!

    Quellcode

    1. <svg width="100%" height="100%" viewBox="-1 -1 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.41421;">
    2. <def>
    3. <clipPath id="textArea" clipPathUnits="objectBoundingBox">
    4. <polygon id="x0" points="2,0 6,0 8,3.5 6,7 2,7 0,3.5 2,0" style="fill:none;stroke:#ed1c24;stroke-width: 0.35px;"/>
    5. </clipPath>
    6. </def>
    7. <g>
    8. <use xlink:href="#x0"/>
    9. <text shape-inside="url(#x0)" line-height="100%" text-align="justified" X="5" y="3.75" fill="#ed1d24" font-size="1.2" text-anchor="middle" font-family="Courier New" font-weight="bold">{{title}}</text>
    10. </g>
    11. </svg>


    doch das resultat sieht wie folgt aus


    also ist mein Hauptproblem, das ich a) nicht weiß wie viele Zeilen mein Text hat und b) ich somit nicht nicht die Mitte angeben kann :/

    Kennt ja ein keyword- weleches mir ein Rechteck oder ähnliches aufspannt, indem dann mein Text steht?

    Hab ich mit tavmjong.free.fr/SVG/TEXT_FLOW/ probiert, wird aber nicht vom Browsern unterstützt, also hab ich dann das gefunden, w3.org/TR/2004/WD-SVG12-20041027/flow.html aber das brachte mich auch nicht weiter :/

Facebook
Telefonspende