Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing SVG path and polygon in cm

Tags:

svg

I want to draw polygon and path elements in svg in cm instead that in pixel (the default option). I was able to do it for line and rectangle adding cm after the number but the following svg code does not work:

<svg width="70cm" height="70cm">
<polygon points="1cm,1cm  2.5cm, 1cm  3cm, 13cm  1cm, 13cm"
    style="stroke: #000099;
     fill: #3333cc;
     fill-opacity: 1;
     "  
     />
</svg>

Same for path. Does anyone know how to solve this?

UPDATE: I tried with different screens, reading a svg file with inkscape or with Chrome. I measured cm on the screen, since I want real-world cm for the shapes that I draw. Here the puzzling results with:

<svg width="20cm" height="20cm" viewBox="0 0 20 20" >
  <polygon points='1,1  2.5,1  3,10  1,10'
    style="stroke: #000000; fill:none;"/>
</svg>

macbook air screen, 118 pixel per inch: the polygon is never in real measures, always smaller, both in inkscape and Chrome on another screen, 166 pixel per inches, measures are ok in Chrome but not in Inkscape. The same if I try to import in SVG-edit.

Does anybody know what's wrong in Inkscape?

Thanks

like image 553
sarah_AI Avatar asked Jun 12 '15 14:06

sarah_AI


1 Answers

You can't directly. BUT (there is always a but in computer science) from the documentation (W3C) :

  • The points in a polygon are expressed in user coordinate system
  • "1cm" equals "35.43307px" (and therefore 35.43307 user units)

So I suggest you add a transform to your polygon which does the conversion and omit the 'cm' in the list of points :

<svg width="15cm" height="15cm">
    <g transform="scale(35.43307)">
        <polygon points="1,1  2.5,1  3,13  1,13"
                 style="stroke: #000099; fill: #3333cc; fill-opacity: 1;" />
    </g>
</svg>
like image 190
TrapII Avatar answered Nov 15 '22 10:11

TrapII