CODEWITHSUNDEEP
svg
Raf
Raf

Reputation: 684

How to start svg pattern from begin for two elements separately and how to setup right coordinate system?

I have two thick lines and I want to apply pattern for this lines. Lines should have the same pattern, but start of drawing pattern should start from (0, 0) for each line separately. In my experiment http://jsfiddle.net/69t09wey/ patterns apply like mask. I.e pattern apply for whole svg canvas as invisible layer and where line is visible, pattern also visible.

<svg viewBox="0 0 1000 1000"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
      <path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
   </pattern>

 <g transform="scale(5)">
    <rect x="1" y="1" width="1000" height="1000"
        fill="none" stroke="blue" />

     <path d="M 1 9 L 200 9"
        fill="red" stroke="url(#pattern-1)" stroke-width="20"  />

   <path d="M 1 53 L 200 53"
        fill="red" stroke="url(#pattern-1)" stroke-width="20" />
   </g>
</svg>

Upvotes: 1

Views: 110

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

If you make your lines the same. Then move the second one by applying a transform. That will shift the coordinate space of the pattern.

<svg viewBox="0 0 1000 1000"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
      <path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
   </pattern>

 <g transform="scale(5)">
    <rect x="1" y="1" width="1000" height="1000"
        fill="none" stroke="none" />

     <path d="M 1 9 L 200 9"
        fill="red" stroke="url(#pattern-1)" stroke-width="20"  />

     <path d="M 1 9 L 200 9" transform="translate(0,44)"
        fill="red" stroke="url(#pattern-1)" stroke-width="20" />
   </g>
</svg>

Upvotes: 1

Related Questions