CODEWITHSUNDEEP
htmlcsssvg
Jack Maessen
Jack Maessen

Reputation: 1864

how to set a stroke on left and right side only on a svg wave

How can i set a stroke only on the right and left side of a svg (wave svg)

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
    <g>
    <path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" 
          style="fill:red;" />
    </g>
 </svg>
 </symbol>
</svg>

<div class="wave">

   <svg style="width: 100%; height: 150px; margin-top: -150px;">
      <use xlink:href="#wave"/>
   </svg>

</div>

So css below gives me stroke around it, but it should only on left and right side:

svg {
   stroke: #000;
}

Fiddle: https://jsfiddle.net/fe43rt4v/1/

Upvotes: 0

Views: 2540

Answers (1)

jcaron
jcaron

Reputation: 17710

  1. Change the path so that the left, bottom and right edges are drawn first: M0,30 v20 h100 v-20 Q70,40 50,30 T0,30. Not 100% required, but makes things easier (otherwise you would need to compute the length of the wave).

  2. Use stroke-dasharray to declare that you want to draw the stroke for the left edge (length 20), not for the bottom (length 100), for the right edge (length 20), and not for the rest (taking length 200 to be safe):

    stroke-dasharray: 20,100,20,200;

That's it!

Fiddle: https://jsfiddle.net/fe43rt4v/2/

svg {
	stroke: #000;
  stroke-dasharray: 20,100,20,200;
}
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="wave">
    <svg viewBox="0 0 100 50" preserveAspectRatio="none" >
	    <g>
  	    <path d="M0,30 v20 h100 v-20 Q70,40 50,30 T0,30" 
              style="fill:red;" />
	    </g>
    </svg>
  </symbol>
</svg>

<div class="wave">
   <svg style="width: 100%; height: 150px; margin-top: -150px;">
		  <use xlink:href="#wave"/>
   </svg>
</div>

Upvotes: 1

Related Questions