このパターンにステッチングボーダーを適用できますか？

Question

ストロークを適用しましたが、最後に表示されていますが、コーナーの4px以下にする必要があります。

<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> 
 
\t <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>

Answer 1

あり、これを行うための別の方法かもしれないが、私の意見では、最も簡単な方法は、第二path要素（またはDEFパスを使用してuse要素）にパスをミラーリングすることであろうと、小さなtranslate（Y軸）を追加してください。

svg { 
 
    height: 200px; 
 
}

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