我如何(如果可能的话)绘制仅沿着此 svg 内部的黑色边框。我尝试过描边并添加描边宽度,但这会包裹整个 svg。有没有办法让中风停在某个点?
div{
width: 300px;
margin: 0 auto;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000"><path stroke-width="4" stroke="#0f0f0f" d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path> </svg>
</div>
最佳答案
如果我理解正确的话,你只想在顶部弯曲部分上画一条笔画。
为此,您可以添加另一条路径,但仅包含曲线:
<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>
然后您可以使用不填充和描边样式来设置其样式。
完整的 svg 代码:
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000">
<path d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path>
<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>
</svg>
</div>
CSS:
div{
width: 300px;
margin: 0 auto;
}
#curvestroke{
fill: none;
stroke: black;
stroke-width:4px;
}
示例fiddle
关于javascript - 如何绘制弯曲的 svg 路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33470184/