パーセンテージ単位をサポートするSVGポリゴンポイント

Question

簡単にサイズを変更できる流体SVGキャンバスを作成しようとしています。これまでのところ私はどこでもパーセンテージを使用しています。しかし、SVG polygonとpathは、point属性のパーセンテージをサポートしていないようです。ここでは例です：

(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> 

しかし、私はそれがコンソールに解析エラーで失敗する割合にpoints属性で番号を変更し始めた場合。私は<svg>要素でサイズ変更できるポリゴンを持つ方法を探しています。

Answer 1

と（どんなサイズの）コンテナ要素は、私はあなたが探している効果を実現することができると思う：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> 

あなたはビューボックスに0 0 100 100の大きさを与える場合、ポイントは割合のように書くことができ、形状はSVGで拡大します。

Answer 2

あなたはグループの要素を一緒gとトランスフォームを使用することができます：ビューボックスを使用することにより

<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>