CODEWITHSUNDEEP
javascripthtmlcsssvg
IceRevenge
IceRevenge

Reputation: 1583

Rotating a single pattern in a pattern with several patterns

I created a few patterns in SVG:

My SVG looks like this:

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

pattern

This is how the last one should actually look but the transform: rotation() messes it up. The problem is that I can't use patternRotation on every single child-pattern because then I would have to create a new pattern every time. I don't want this because of performance issues. And I can't use patternRotation on the parent-pattern because then it rotates the entire thing and not just a single line.

Is there a workaround for this?

Upvotes: 0

Views: 174

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

You can avoid rotation in the base patterns:

<svg width="1000px" height="1000px">
	<defs>
  	<pattern id="A" patternUnits="userSpaceOnUse" width="30" height="12.5">
    	<path d="M0,0 L30,12.5" style="stroke: black; stroke-width: 0.45"/>
   	</pattern>
    <pattern id="B" patternUnits="userSpaceOnUse" width="20" height="20">
    	<path d="M0,20 L20,0" style="stroke: black; stroke-width: 0.45;"/>
    </pattern>
    <pattern id="MIX" patternUnits="userSpaceOnUse" width="100%" height="100%">
    	<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>
  </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="125" y="125" width="200px" height="200px" fill="url(#MIX)"/>
</svg>

Upvotes: 2

Related Questions