Punkty wieloboku SVG z jednostkami procentowymi wsparcie

Question

Próbuję mieć płynne płótno SVG, które można łatwo zmienić rozmiar. Do tej pory używam wszędzie procentów. Wygląda jednak na to, że SVG polygon i path nie obsługują wartości procentowych w atrybucie point. Oto przykład:

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

Jednak jeśli zacznę zmienić numery w atrybucie points procentom nie powiedzie się z analizowania błędów w konsoli. Szukam sposobu na zmianę rozmiaru wielokąta z elementem <svg>.

Answer 1

Korzystając viewBox i element kontenera (niezależnie od ich wielkości), myślę, że można osiągnąć efekt, którego szukasz: 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> 

Jeśli dać viewBox rozmiar 0 0 100 100 następnie punkty można zapisać jak procenty i kształt będą skalowane z SVG.

Answer 2

Można grupować elementy, wraz ze g i użyć transformacji:

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