5

I'm trying to output real size SVG's so I'm using cm as the unit

The rotation transform works fine with pixels but when I switch to cm it doesn't rotate the element as expected

<image preserveAspectRatio="none" x="1cm" y="1cm" width="3cm" height="3cm" 
        xlink:href="http://api.prestalife.net/media/superman.png" 
        transform="rotate(45, 2.5, 2.5)"
        />

jsFiddle: The code contains a comparison between px and cm

unloco
  • 6,928
  • 2
  • 47
  • 58
  • 1
    Units of any kind are invalid in transform attributes currently. There are plans to change this in SVG 2 but that new specification is still being written. – Robert Longson May 29 '15 at 23:24
  • Thank you, I will try to convert the center point to pixel units – unloco May 29 '15 at 23:32
  • The elements inside the SVG container are not interpreted as cm. Which contradicts their own rules, as can be read [here](http://stackoverflow.com/questions/7087586/svg-1-1-what-is-user-unit-and-how-to-convert-user-unit-into-absolute-uniteg). -- Excellent question by the way. – ShellFish May 29 '15 at 23:36
  • @ShellFish well, the elements themselves are fine, it's just that (x, y) parameters of the rotate transform are interpreted as pixel values not cm. I corrected this issue by converting the cm to px, I'll post an edit/answer – unloco May 29 '15 at 23:40
  • He should not have to write the unit inside the svg container, specifying that he want to size them using cm is redundant according to their own literature (see previous link). Yet when the unit is omitted, the unit is *not* treated as the parent's svg unit, which it should do. – ShellFish May 29 '15 at 23:47

1 Answers1

6

The different transform functions use the absolute CSS unit as a reference so you have to convert your cm value to those units; For a 90dpi resolution, it might be something like this :

  • 1pt -> 1.25px
  • 1pc -> 15px
  • 1mm -> 3.543307px
  • 1cm -> 35.43307px
  • 1in -> 90px

However, it might not be suitable for any kind of resolution! You should probably use a viewBox that allows you to define your "own" units inside an svg element. Thus, your problem could be solve like this :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="5cm" height="5cm" style="background-color: #EEE" viewBox="0 0 5 5">

    <image preserveAspectRatio="none" x="1" y="1" width="3" height="3" 
    xlink:href="http://api.prestalife.net/media/superman.png" 
    transform="rotate(45, 2.5, 2.5)"
    />
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
KtorZ
  • 859
  • 6
  • 12
  • Nice, didn't know about the viewbox thing. I thought the unit was defined by simply defining a unit in the with or height of the svg. This explains so much though, +1! – ShellFish May 29 '15 at 23:48
  • 1
    You're welcome! Have a look at [this](http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute) by the by. – KtorZ May 29 '15 at 23:50
  • While Inkscape version 0.91 and earlier use a value of **90** pixels per inch as default resolution, most browsers use **96** pixels per inch: http://www.w3.org/TR/css3-values/#absolute-lengths http://wiki.inkscape.org/wiki/index.php/Units_In_Inkscape – Stefan Dec 15 '15 at 21:35
  • Indeed, however, the relevant piece of information here is about using a viewBox to get rid of the issues brought by resolution consideration :) – KtorZ Dec 16 '15 at 15:08