如何绘制弯曲的svg路径

问题描述：

我将如何（如果可能）绘制只沿着此svg内部的黑色边框。我已经尝试了中风并添加了中风宽度，但是这包裹了整个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

如何绘制弯曲的svg路径

相关推荐