CODEWITHSUNDEEP
svg
JsCoder
JsCoder

Reputation: 1733

SVG line with the multiline pattern

I need an SVG path which'd using a line with the following 'pattern' for the line: 5 pixels width, 1 pix green line followed by 3 pix white line followed by 1 pix green line again. I know that I can kind of accomplish it by drawing 3 paths by using green, white and green colors and small offsets, but I'm looking for a way to do it in one go if possible.

Clarification:

Imagine that you have 3 pens with 3 different colors bound together so you can use them as one. I want to draw an arbitrary path using that 3 color pen by specifying the path data just once.

Upvotes: 0

Views: 2186

Answers (2)

Sphinxxx
Sphinxxx

Reputation: 13037

You can achieve your "3 pen effect" by defining the base path once, and then use that path several times with different x and y offsets and other settings (such as stroke):

<svg width="200" height="170">
    <defs>
        <path id="pattern" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" />
    </defs>

    <g stroke-width="2">
        <use xlink:href="#pattern" x="0"  y="0"  stroke="red" />
        <use xlink:href="#pattern" x="5"  y="0"  stroke="green" stroke-width="4" />
        <use xlink:href="#pattern" x="10" y="0"  stroke="blue" />
    </g>
</svg>

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101868

I presume you mean that the pattern flows along the line, as in two parallel green lines. SVG can't do that in one go. You will need to use two lines for that I am afraid.

<svg width="400" height="400">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="green" stroke-width="5"/>
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="white" stroke-width="3"/>
  <rect x="50" y="100" width="300" height="200" fill="none" stroke="green" stroke-width="5"/>
  <rect x="50" y="100" width="300" height="200" fill="none" stroke="white" stroke-width="3"/>
</svg>

Upvotes: 1

Related Questions