html - 如何仅在 svg wave 上设置左右两侧的笔画

Question

如何只在 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>

所以下面的 css 让我在它周围描边，但它应该只在左侧和右侧:

svg {
   stroke: #000;
}

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

Answer 1

1. 更改路径，以便首先绘制左边缘、下边缘和右边缘:M0,30 v20 h100 v-20 Q70,40 50,30 T0,30。并非 100% 必需，但会使事情变得更容易(否则您将需要计算波的长度)。

2. 使用stroke-dasharray 声明您要为左边缘(长度 20)绘制笔划，而不是底部(长度 100)，为右边缘(长度20)，而不是其余的(为安全起见，长度为 200):

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

就是这样!

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>