Search code examples
svgsvg-pattern

How do I flip every other repeat in a SVG pattern?


I want to make a SVG pattern where every other horizontal repeat is mirrored compared to the original. How would I do that, is there subpatterns or a pattern element that can be used?

This is the code I've tried with so far.

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="148mm" height="148mm" version="1.1" style="shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 14880 14880" xmlns:xlink="http://www.w3.org/1999/xlink">`
  <defs>
    <pattern id="pattern1" xlink:href="#subpattern1" patternTransform="translate(5958.89 8242.19) scale(37.979 37.979) rotate(0.00 1063.39 1822.99)" />
    <pattern id="subpattern1" patternUnits="userSpaceOnUse" height="96" width="56">
      <image x="0" y="0" height="96" width="56" xlink:href="myimage.png" />
    </pattern>
  </defs>
  <g>
    <path style="fill:url(#pattern1)" stroke="#000000" stroke-width="0.00" d="M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z "/>
  </g>
</svg>


Solution

  • Inside the pattern I would use the image with a transform="scale(-1,1)". In order to make it work I would use a viewBox attribute for the pattern

    <pattern ..... height="96" width="112" viewBox="-56 0 112 96">

    svg{background:silver}
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="148mm" height="148mm" version="1.1" style="shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 14880 14880" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <pattern id="pattern1" xlink:href="#subpattern1" patternTransform="translate(5958.89 8242.19) scale(37.979 37.979) rotate(0.00 1063.39 1822.99)" />
        <pattern id="subpattern1" patternUnits="userSpaceOnUse" height="96" width="112" viewBox="-56 0 112 96">
          <image id="img" x="0" y="0" height="96" width="56" xlink:href="https://assets.codepen.io/222579/book_red.jpg" />
          <use href="#img" transform="scale(-1,1)"/>
        </pattern>
      </defs>
      <g>
        <path style="fill:url(#pattern1)" stroke="#000000" stroke-width="0.00" d="M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z "/>
      </g>
    </svg>