使用不寻常的视图框垂直翻转 SVG答案

【问题标题】：Flip SVG vertically using an unusual viewbox使用不寻常的视图框垂直翻转 SVG
【发布时间】：2017-04-06 23:52:27
【问题描述】：

我正在尝试垂直翻转 SVG，同时使用像 1000 1000 50 50 这样的视图框。一般来说，我知道该怎么做，但是我对 SVG 中处理坐标系的方式感到困惑。请在下面找到我的测试 sn-ps。

示例 4 包含我想要实现的目标，但它不起作用。有什么想法吗？

示例 1：基本 SVG（有效）

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 50 50" style="background-color: red">
    <g>
        <line x1="0" y1="0" x2="20" y2="20" stroke-width="2" stroke="black" />
    </g>
</svg>

示例 2：翻转基本 SVG（有效）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 50 50" style="background-color: red">
    <g transform="translate(0,50) scale(1,-1)">
    <line x1="0" y1="0" x2="20" y2="20" stroke-width="2" stroke="black" />
    </g>
</svg>

示例 3：基本 SVG，带有不寻常的视图框（有效）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="1000 1000 50 50" style="background-color: red">
    <g>
    <line x1="1000" y1="1000" x2="1020" y2="1020" stroke-width="2" stroke="black" />
    </g>
</svg>

示例 4：基本 SVG，带有不寻常的视图框，翻转（不起作用）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="1000 1000 50 50" style="background-color: red">
    <g transform="translate(0,1000) scale(1,-1)">
    <line x1="1000" y1="1000" x2="1020" y2="1020" stroke-width="2" stroke="black" />
    </g>
</svg>

【问题讨论】：

标签： svg

【解决方案1】：

变换命令是右乘的；这意味着在您的第四个示例中，该行首先被缩放（y=1000 移动到 y=-1000）然后平移（y=-1000 移动到 y=0）。它在用户空间坐标中的最终位置是

<line x1="1000" y1="0" x2="1020" y2="-20" stroke-width="2" stroke="black" />

您的 viewBox 覆盖 1000 到 1050 之间的 y 坐标；这条线离那很远。

如果您的目标是保持相同的 viewBox，那么正确的变换是

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="1000 1000 50 50" style="background-color: red">
    <g transform="translate(0,2050) scale(1,-1)">
    <line x1="1000" y1="1000" x2="1020" y2="1020" stroke-width="2" stroke="black" />
    </g>
</svg>

公式为：（2*上角到原点的距离+viewBox的高度）

【讨论】：