如何绘制曲线svg路径
How to draw a curved svg path
如果可能的话,我将如何绘制一个只沿着这个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
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何更改<svg>标记为<img>用js标记
- 锚点元素不't使用svg时,请打开EDGE上的href
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 使用onclick绘制SVG路径
- SVG/JavaScript:尝试选择和更改多边形点
- 顺时针旋转Svg元件
- 禁用SVG拖动
- 在select元素中显示highchart dashstyle(svg)
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 在滚动上绘制一条曲线虚线 SVG
- 在替代点中为折线创建 SVG 标记.(阶梯曲线)
- 如何使用 svg 循环绘制贝塞尔曲线
- SVG 如何创建 180 度的贝塞尔曲线
- SVG路径:直线上的曲线
- 如何更改SVG元素上的曲线
- 如何绘制曲线svg路径
- 为什么我的SVG贝塞尔曲线在Firefox中被破坏了?
- 如何将 SVG'c' 曲线转换为三次贝塞尔曲线列表