如何绘制尖锐的 SVG 贝塞尔曲线

Question

我是 SVG 的新手，希望在 svg 代码中有一条尖头曲线，如下图所示（使用 python svg 库）：

有什么方法可以使用贝塞尔曲线来实现这一点，或者是否有可能绘制一条正常的贝塞尔曲线并用 css 修改末端使其变得尖锐？ 我将不胜感激一个代码示例。

Answer 1

可以通过在一条线上使用粘性效果来生成类似的东西，这条线上已经填充了适当的 alpha 渐变以获得可变宽度。 但结果需要对渐变 alpha、模糊半径、滤镜中的粘性参数进行相当多的调整，然后是“修复”feComponentTransfer。 我建议明确地用填充形状绘制它。

 <svg width="400px" height="400px" viewBox="0 0 55 55"> <defs> <filter id="taper" filterUnits="userSpaceOnUse" width="55" height="55"> <feGaussianBlur stdDeviation="0.8"/> <feColorMatrix type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 9 -2"/> <feComponentTransfer> <feFuncA type="table" tableValues="0 1 1 1 1 1"/> </feComponentTransfer> </filter> <linearGradient id="myGradient"> <stop offset="0%" stop-color="rgba(0,0,0,0.3)" /> <stop offset="50%" stop-color="rgba(0,0,0,1)" /> <stop offset="100%" stop-color="rgba(0,0,0,0.3)" /> </linearGradient> </defs> <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="url(#myGradient)" stroke-width="2" fill="none" filter="url(#taper)" stroke-linecap="round"/> </svg>

Answer 2

尝试这个：

 <svg height="100" width="500"> <ellipse cx="250" cy="120" rx="250" ry="120" style="fill:black" /> <ellipse cx="250" cy="120" rx="260" ry="112" style="fill:white" /> Sorry, your browser does not support inline SVG. </svg>

Answer 3

您可以只使用带有两条曲线的闭合路径，一条比另一条稍微“膨胀”：

 <svg height="100" width="500" viewBox="0 40 100 60"> <path d="M 0 60 Q 50 40 100 60 Q 50 45 0 60 Z" /> </svg>

其中，第一条曲线是M 0 60 Q 50 40 100 60 ，即控制点 50,40 上从 0,60 到 100,600 的二次曲线，第二条曲线是... 100 60 Q 50 45 0 60部分，定义从“我们已经在哪里”开始的曲线，即 100,60（我们的第一条曲线的终点），结束于 0,60（我们的第一条曲线的起点）并由 50,45 控制

Z在技术上在这里不是必需的，但由于这是一条封闭路径，我们不妨明确编码这是一条封闭路径。

如果你想要“锥形末端”，那么你可以使用两条三次曲线，控制点靠近端点。