Wie skaliere ich eine SVG-polygon in ems?

Ich bin einbetten eines <svg> - element direkt in einem HTML5-Dokument, und ich möchte zu skalieren einer sich wiederholenden hintergrund-Muster in Bezug auf die Seite ist die Schriftgröße. Kein problem, SVG unterstützt CSS-Einheiten, so kann ich nur angeben, die Größe in ems, richtig?

In der SVG-Spezifikation Ansprüche "Alle Koordinaten und Längen in SVG angegeben werden kann, mit oder ohne unit identifier." Und in der Tat, diese beiden tun genau das, was ich mir erhofft hatte:

<rect x='1em' y='2em' width='3em' height='4em' />
<circle cx='6em' cy='7em' r='8em' />

Aber Polygone (zum Beispiel) haben Ihre eigenen ganz andere definition das Wort "koordinieren", so dass dies einen Fehler auslöst, statt der Zeichnung eine 1 em Dreieck:

<polygon points='0 0, 0 1em, 1em 0' />

Pfade sind auf die gleiche Weise-verständlicherweise, da Sie bereits mit den Buchstaben für einen anderen Zweck.

Und Transformationen wie "scale" erwarten "Zahl", nicht eine "Koordinate" oder "Länge", so ist dies nicht erlaubt ist, entweder (mein browser scheint still ignorieren Sie die "transform" - Attribut):

<polygon points='0 0, 0 1, 1 0' transform='scale(1em)' />

So, ich denke, ich kann nicht einmal herausfinden, wie man einen draw 1 em-Dreieck, viel weniger etwas komplizierter. Bin ich mit Blick auf eine angemessene Art und Weise, es zu tun? Was ist eine unangemessene Art und Weise? Sollte ich aufgeben und verwenden Sie eine <canvas> element statt, oder wäre das noch schlimmer?

InformationsquelleAutor zaphod | 2011-12-15
  1. 25

    Können Sie wickeln Sie Ihre Polygone in eine innere <svg> element zu skalieren, wie Sie es wünschen. Das viewBox-steuert das Koordinatensystem der Objekte, die es enthält und die Attribute height und width Steuern, wie groß Sie aussieht.

    <svg xmlns="http://www.w3.org/2000/svg">
  <svg viewBox="0 0 1 1" height="1em" width="1em" y="7em">
      <polygon points='0 0, 0 1, 1 0' />
  </svg>
  <circle cx='6em' cy='7em' r='2em' />
</svg>
    • Genial. Danke!
    InformationsquelleAutor Robert Longson
  2. 3

    Können Sie Transformationen auf jedes Element, und verwenden Sie em oder andere Einheiten.

    Zum Beispiel, das funktioniert gut:

    <polygon points='0 0, 0 1, 1 0' transform='scale(2em 1.5em)' />
    InformationsquelleAutor Angelica Steele
Schreibe einen Kommentar