CODEWITHSUNDEEP
svg
ste4lth
ste4lth

Reputation: 129

Transform element in a pattern

I have a pattern with a straight arrows in a rectangle.

 <svg id='patternId' width='100%' height='300' xmlns='http://www.w3.org/2000/svg'>
       <defs>
       <pattern id="pattern_2" patternUnits="userSpaceOnUse" width="8" height="48" patternTransform="rotate(180) scale(4,4)">
        <rect x="0" y="0" width="100%" height="100%" fill="#68E9E5" fill-opacity="0.2"></rect>
        <line x1="1" y1="0" x2="1" y2="48" stroke="#68E9E5" stroke-width="0.2"></line>
        <polygon points="0,5 1,0 2,5" fill="#68E9E5" stroke="#68E9E5" stroke-width="0.1"></polygon>
        </pattern>
        </defs>
    <rect x="10" y="8" width="500" height="187" fill="url(#pattern_2)" stroke="#68E9E5" stroke-width="0.2" fill-opacity="0.5"></rect>
    </svg>

pattern in rectangle

I would like to use that pattern in a polygon. But How do I incline arrows along inclined edge?

 <polygon points="50,48 190,48 190,48 50,28" fill="#39748E" stroke="#39748E" stroke-width="0.2" fill-opacity="0.2"></polygon>

pattern in polygon

Upvotes: 2

Views: 102

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

You could add a skewY() transform to the pattern. But you would need to do some work to align the pattern with you polygon edge.

<svg id='patternId' width='100%' height='300' xmlns='http://www.w3.org/2000/svg'>
   <defs>
   <pattern id="pattern_2" patternUnits="userSpaceOnUse" width="8" height="48" patternTransform="rotate(180) scale(4,4) skewY(-10)">
    <rect x="0" y="0" width="100%" height="100%" fill="#68E9E5" fill-opacity="0.2"></rect>
    <line x1="1" y1="0" x2="1" y2="48" stroke="#68E9E5" stroke-width="0.2"></line>
    <polygon points="0,5 1,0 2,5" fill="#68E9E5" stroke="#68E9E5" stroke-width="0.1"></polygon>
    </pattern>
    </defs>
<rect x="10" y="8" width="500" height="187" fill="url(#pattern_2)" stroke="#68E9E5" stroke-width="0.2" fill-opacity="0.5"></rect>
</svg>

Upvotes: 2

Related Questions