如何仅在 svg 波浪上设置左侧和右侧的笔划答案

【问题标题】：how to set a stroke on left and right side only on a svg wave如何仅在 svg 波浪上设置左侧和右侧的笔划
【发布时间】：2018-01-11 13:52:13
【问题描述】：

如何仅在 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;
}

小提琴：https://jsfiddle.net/fe43rt4v/1/

【问题讨论】：

标签： html css svg

【解决方案1】：

更改路径以便首先绘制左、下和右边缘：M0,30 v20 h100 v-20 Q70,40 50,30 T0,30。不是 100% 要求，但可以让事情变得更容易（否则您需要计算波的长度）。
使用stroke-dasharray 声明您要为左边缘（长度 20）绘制笔划，而不是为底部（长度 100）、右边缘（长度 20）而不是其余部分（取为了安全起见，长度为 200）：
```
stroke-dasharray: 20,100,20,200;
```

就是这样！

小提琴：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>

【讨论】：