SVG以厘米为单位旋转答案

【问题标题】：SVG rotate with centimeters as the unitSVG以厘米为单位旋转
【发布时间】：2015-08-12 22:45:35
【问题描述】：

我正在尝试输出真实尺寸的 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的比较

【问题讨论】：

目前任何类型的单位在变换属性中都是无效的。有计划在 SVG 2 中对此进行更改，但新规范仍在编写中。
谢谢，我会尝试将中心点转换为像素单位
SVG 容器内的元素不会被解释为 cm。这与他们自己的规则相矛盾，可以阅读here。 -- 顺便说一句，问题很好。
@ShellFish 好吧，元素本身很好，只是旋转变换的 (x, y) 参数被解释为像素值而不是 cm。我通过将 cm 转换为 px 更正了这个问题，我将发布编辑/答案
他不应该在 svg 容器中写入单位，根据他们自己的文献，指定他想使用 cm 来调整它们的大小是多余的（参见前面的链接）。然而，当省略单位时，该单位不被视为父级的 svg 单位，它应该这样做。

标签： svg rotation transform

【解决方案1】：

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

1pt -> 1.25px
1pc -> 15px
1mm -> 3.543307px
1cm -> 35.43307px
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>

【讨论】：

很好，不知道视图框的事情。我认为该单位是通过简单地在 svg 的 with 或 height 中定义一个单位来定义的。这解释了很多，+1！
不客气！看看this by。
虽然 Inkscape 0.91 及更早版本使用每英寸 90 像素作为默认分辨率，但大多数浏览器使用每英寸 96 像素：@987654322 @wiki.inkscape.org/wiki/index.php/Units_In_Inkscape
事实上，这里的相关信息是关于使用 viewBox 来摆脱分辨率考虑带来的问题 :)