I am trying to have a fluid SVG canvas that can resize easily. So far I'm using percentages everywhere. However it seems like SVG polygon and paths do not support percentages in point attribute. Here's an example:

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

However if I start to change numbers in points attribute to percentages it fails with parsing error in console. I am looking for a way to have the polygon that can resize with the <svg> element.

svg
Edit
Report