Я создал несколько шаблонов в SVG:
- Тот, который имеет вертикальные полосы (id: A)
- Тот, который имеет горизонтальные полосы (id: B)
- Тот, который имеет горизонтальные и вертикальные полосы (я сделал это, добавив оба шаблона в один новый шаблон, id: AB)
- И один рисунок, с горизонтальными и вертикальными полосами, но оба они вращаются по-разному (A на 25 ° и B на 45 °)
Мой SVG выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<svg width="1000px" height="1000px">
<defs>
<pattern id="A" patternUnits="userSpaceOnUse" width="25" height="25">
<path d="M0,12.5 L25,12.5" style="stroke: black; stroke-width: 0.45"/>
</pattern>
<pattern id="B" patternUnits="userSpaceOnUse" width="25" height="25">
<path d="M12.5,0 L12.5,25" style="stroke: black; stroke-width: 0.45;"/>
</pattern>
<pattern id="AB" patternUnits="userSpaceOnUse" width="25" height="25">
<rect x="0" y="0" height="100%" width="100%" fill="url(#A)"/>
<rect x="0" y="0" height="100%" width="100%" fill="url(#B)"/>
</pattern>
<pattern id="A@25deg;B@45deg" patternUnits="userSpaceOnUse" width="100%" height="100%">
<rect x="0" y="0" height="100%" width="100%" fill="url(#A)" style="transform: rotate(25deg)"/>
<rect x="0" y="0" height="100%" width="100%" fill="url(#B)" style="transform: rotate(45deg)"/>
</pattern>
</defs>
<rect x="0" y="0" width="100px" height="100px" fill="url(#A)"/>
<rect x="125" y="0" width="100px" height="100px" fill="url(#B)"/>
<rect x="0" y="125" width="100px" height="100px" fill="url(#AB)"/>
<rect x="125" y="125" width="200px" height="200px" fill="url(#A@25deg;B@45deg)"/>
</svg>
</body>
</html>
Вот как на самом деле должен выглядеть последний, но transform: вращение () портит его. Проблема в том, что я не могу использовать patternRotation для каждого дочернего шаблона, потому что тогда мне придется каждый раз создавать новый шаблон. Я не хочу этого из-за проблем с производительностью. И я не могу использовать patternRotation для родительского шаблона, потому что тогда он вращает всю вещь, а не только одну строку.
Есть ли обходной путь для этого?