SVG GRID 转换 - 水平翻转答案

【问题标题】：SVG GRID Transformation - Flip HorizontallySVG GRID 转换 - 水平翻转
【发布时间】：2019-05-07 10:54:53
【问题描述】：

我需要水平翻转这个 SVG 网格，因为我想从左上角而不是左下角绘制网格。如果运行代码，你会看到我的问题。我需要左下角的完整方块。

代码如下：

<svg width="80mm" height="50mm" viewBox="0 0 80 50" xmlns="http://www.w3.org/2000/svg"> 
<defs><pattern id="grid" width="3" height="3" patternUnits="userSpaceOnUse"><path  d="M 3 0 L 0 0 0 3" fill="none" stroke="black" stroke-width="0.3"/></pattern></defs>
<rect x="0" y="0" width="80" height="50" style="fill:gray; stroke-width:0; stroke:black"/><rect x="0" y="0" width="80" height="50" fill="url(#grid)"/>
</svg>

【问题讨论】：

您的图案是 3/3 正方形。尝试制作viewBox="0 0 90 60"。还将矩形的 width 和 height 更改为 3 的倍数。

标签： svg path grid

【解决方案1】：

您可以简单地将整个物体旋转 180 度。

<svg width="80mm" height="50mm" viewBox="0 0 80 50" xmlns="http://www.w3.org/2000/svg"> 
 <g transform="rotate(180 40 25)">
<defs><pattern id="grid" width="3" height="3" patternUnits="userSpaceOnUse"><path  d="M 3 0 L 0 0 0 3" fill="none" stroke="black" stroke-width="0.3"/></pattern></defs>
<rect x="0" y="0" width="80" height="50" style="fill:gray; stroke-width:0; stroke:black"/><rect x="0" y="0" width="80" height="50" fill="url(#grid)"/>
</g>g>
</svg>

【讨论】：