SVG-Polygon-Punkte mit prozentualen Einheiten Unterstützung

Question

Ich versuche, eine flüssige SVG Canvas zu haben, die Größe leicht ändern kann. Bisher verwende ich Prozentsätze überall. Es scheint jedoch, dass SVG polygon und path s keine Prozentsätze in point Attribut unterstützen. Hier ein Beispiel:

(jsFiddle)

<svg width='90%' height='90%' style='background-color: whitesmoke'> 
    <rect x='40%' y='40%' width='25%' height='25%' /> 

    <polygon points="0,0 0,100 30,20 30,0" /> 
    <polygon points="30,0 30,20 60,0 60,0" /> 
    <polygon points="60,0 60,0 90,30 90,0" /> 
</svg> 

Allerdings, wenn ich Zahlen beginnen in points Attribut zu ändern, um Prozentsätze mit Parsing-Fehler in der Konsole schlägt fehl. Ich suche nach einem Weg, das Polygon zu haben, das mit dem <svg> Element die Größe ändern kann.

Answer 1

Durch die Verwendung von viewBox und ein Containerelement (wie auch immer Größe) Ich denke, dass Sie den Effekt erzielen können Sie suchen: http://jsfiddle.net/davegaeddert/WpeH4/

<div id="svg-container" style="width:100%;height:100%;"> 
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'> 
     <rect x='40%' y='40%' width='25%' height='25%' /> 

     <polygon points="0,0 0,100 30,20 30,0" /> 
     <polygon points="30,0 30,20 60,0 60,0" /> 
     <polygon points="60,0 60,0 90,30 90,0" /> 
    </svg> 
</div> 

Wenn Sie die viewBox eine Größe von 0 0 100 100 geben, dann können die Punkte wie Prozentsätze geschrieben werden, und die Form wird mit dem sVG-Skala.

Answer 2

Sie können Gruppe die Elemente zusammen mit g und verwenden Sie eine Transformation:

<svg width='90%' height='90%' style='background-color: whitesmoke'> 
    <rect x='40%' y='40%' width='25%' height='25%' /> 

    <g transform="scale(0.4 0.4)"> 
     <polygon points="0,0 0,100 30,20 30,0"/> 
     <polygon points="30,0 30,20 60,0 60,0"/> 
     <polygon points="60,0 60,0 90,30 90,0"/> 
    </g> 
</svg>