SVG polygon points with percentage units support

svg

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.

By using viewBox and a container element (of whatever size) I think you can achieve the effect you're looking for: 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>

If you give the viewBox a size of 0 0 100 100 then the points can be written like percentages and the shape will scale with the svg.

You can group the elements together with g and use a transform:

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

SVG polygon points with percentage units support

Related

Recent Posts