SVG rotates with centimeter as unit
I am trying to output SVG of real size, so I am using cm as 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 : code contains comparison between px and cm
+3
source to share
1 answer
Various conversion functions use an absolute CSS block as a reference, so you need to convert the cm value to these units; For permission, 90dpi
it could be something like this:
- 1pt → 1.25px
- 1pc → 15px
- 1mm → 3.543307px
- 1cm → 35.43307px
- 1in → 90px
However, this may not be acceptable for any resolution! You should probably use a viewBox , which allows you to define your own "custom" units within the svg element. So your problem can be solved 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>
+4
source to share