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决议，可能是这样的：

• 1 磅 -> 1.25 像素
• 1 件 -> 15 像素
• 1 毫米 -> 3.543307 像素
• 1厘米 - > 35.43307像素
• 1 英寸 -> 90 像素

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

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