Question

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

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

示例1：基本SVG（有效）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

示例3：基本SVG，具有不寻常的视图（工作）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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，那么正确的转换是

＆＃13;

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

＆＃13;

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

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

1 个答案: