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