如何绘制弯曲的 svg 路径

【问题标题】：How to draw a curved svg path如何绘制弯曲的 svg 路径
【发布时间】：2016-02-01 21:32:26
【问题描述】：

我将如何（如果可能）绘制仅沿此 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>

【问题讨论】：

标签： javascript html svg path

【解决方案1】：

如果我理解正确，您只想在顶部弯曲部分上画笔。

为此，您可以添加另一条路径，但只包括曲线：

<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

【讨论】：