SVG GRID Transformation - Отразить по горизонтали - PullRequest
0 голосов
/ 07 мая 2019

Мне нужно перевернуть эту 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>

1 Ответ

0 голосов
/ 07 мая 2019

Вы можете просто повернуть все это на 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>
...