我们可以将缝合边框应用于此模式吗？

Question

我已经应用了中风，但它最终出现但我需要它在角落下方4px。

＆＃13;

＆＃13;

<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="38%" stop-color="rgb(255, 195, 56)" />
      <stop offset="68%" stop-color="rgb(255, 234, 104)" />
    </linearGradient>
	<style type="text/css"><![CDATA[
       #pat {
         stroke:black; stroke-width:0.1px; stroke-dasharray:0.3; 
       }
    ]]></style>
  </defs>
  <path id="pat" fill="url(#gradient)" d="M0 6 V5 Q2.5 3.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V6" />
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

可能有其他方法可以做到这一点，但在我看来，最简单的方法是在第二个path元素中镜像路径（或使用路径def和use元素）并添加一个小translate（在Y轴上）转换为它。

＆＃13;

＆＃13;

svg {
  height: 200px;
}

＆＃13;

<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="38%" stop-color="rgb(255, 195, 56)" />
      <stop offset="68%" stop-color="rgb(255, 234, 104)" />
    </linearGradient>
    <path d="M0 6 V5 Q2.5 3.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V6" id='wave'/>
    <style type="text/css">
      <![CDATA[ #pat {
        stroke: black;
        stroke-width: .1;
        stroke-dasharray: 0.3;
      }
      ]]>
    </style>
  </defs>
  <use xlink:href="#wave" fill="url(#gradient)" />
  <use xlink:href="#wave" id="pat" fill="transparent" transform="translate(0,.15)" />
</svg>

＆＃13;

＆＃13;

＆＃13;