SVG以厘米为单位旋转

Question

我正在尝试输出实际大小的 SVG，所以我使用 cm 作为单位

旋转变换适用于像素，但当我切换到 cm 时，它不会按预期旋转元素

<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：代码中包含px和cm的比较

Answer 1

不同的变换函数使用绝对 CSS 单位作为参考，因此您必须将 cm 值转换为这些单位；对于 90dpi 分辨率，它可能是这样的：

1pt -> 1.25px
1pc -> 15px
1 毫米 -> 3.543307 像素
1cm -> 35.43307px
1 英寸 -> 90 像素

但是，它可能不适合任何分辨率！您可能应该使用 viewBox 允许您在 svg 元素内定义 "own" 单位。因此，您的问题可以这样解决：

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

SVG以厘米为单位旋转

SVG rotate with centimeters as the unit

svg

rotation

transform