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;
}

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

Answer 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>

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

1 个答案: