dimanche 11 mars 2018

Diagonal Pattern in SVG

I've made an rect with Diagonal Pattern inside with below code.

 <svg class="inject-me nemo-bg"width="107px" height="60" >
  <defs>
    <pattern id="diagonalHatch" width="4" height="4"
    patternUnits="userSpaceOnUse"
    patternTransform="translate(0,200)" >
    <animateTransform attributeType="xml"
              attributeName="patternTransform"
              type="translate" from="0" to="200" begin="0"
              dur="60s" repeatCount="indefinite"/>
    <path d="M-1,1 l2,-2
             M0,4 l4,-4
             M3,5 l2,-2"
          style="stroke:#d9d9d9; stroke-width:2; "/>
  </pattern>
  </defs>
  <rect x="0" y="0" width="107" height="100%" fill="url(#diagonalHatch)"/>
  </svg>

However the space between diagonal lines are too narrow.

I want to make it as doubled size. I increase the width and height value of pattern but found out that I also have to handle path value.

For increasing it about doubled size what do I have to do?

Aucun commentaire:

Enregistrer un commentaire