Machen Sie SVG-Zeichnung in voller Breite

Question

Ich frage mich, warum das Pfadelement nicht die volle Breite des SVG-Frame mit einem Ansichtsfenster auf 100 Einheiten Breite. Liegt es daran, dass die Zeichnung im Pfad-Tag zusätzlichen Platz auf der rechten Seite enthält?

<div style="width: 200px; height: 200px; background-color: rgb(2, 189, 173); background-image: linear-gradient(135deg, rgb(2, 189, 173), rgb(3, 82, 149));"> 

    <svg style="width: 100%;" viewBox="0 0 100 100"> 
    <path d="M71.7 14.7H3.1L16.3 1.4 14.9 0 0 14.9v1.5l14.9 14.9 1.4-1.4L3.1 16.7h68.6z" style=" 
    fill: white;"></path> 
    </svg> 

    </div> 

http://codepen.io/anon/pen/NRELRB

Answer 1

Das Problem war, dass ich die viewBox der letzten 2 Argumente falsch interpretiert.

0, 0, 100, 100 entspricht nicht der Einstellung 100% Breite, 100% Höhe.

Das SVG-Ansichtsfenster ist wie ein Iframe und hat keine Ahnung von den Inhalten darin, also ist es Ihre Aufgabe, den Rahmen über die Zeichnung zu setzen, die Sie in diesem SVG-Dokument haben. Also in meinem Fall sollte es 0, 0, 71, 31.

sein