Hallo,
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
>
jetzt noch den Text einfügen und fertig!
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
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
- <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;">
- <g>
- <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;"/>
- </g
jetzt noch den Text einfügen und fertig!
Quellcode
- <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;">
- <def>
- <clipPath id="textArea" clipPathUnits="objectBoundingBox">
- <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;"/>
- </clipPath>
- </def>
- <g>
- <use xlink:href="#x0"/>
- <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>
- </g>
- </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