代码之家 › 专栏 › 技术社区 › ashish singh

我能在SVG中实现直线和曲线之间的平滑过渡吗?

svg

ashish singh · 技术社区 · 7 年前

如果我这样做了

<path d="M30 100 Q 80 30, 100 100 T 200 80" fill="none" stroke="black"/>

它会平滑现有的贝塞尔曲线端点,以生成另一条具有指定端点的贝塞尔曲线 T

所以在这种情况下,曲线之前 T 必须是贝塞尔曲线,我能在第一条曲线是直线的情况下达到效果吗。

我知道我可以用三次贝塞尔和二次贝塞尔。

我只是想知道这个案子有没有捷径 我希望贝塞尔曲线从直线开始平滑 或者作为任何路径的延伸

1 回复 | 直到 7 年前

enxaneta 7 年前

您可以使用如下路径命令绘制一条线:

<path d="M10,10 L90,90" />

你也可以用二次BÃzier来画同样的线。这个想法是得到这条线上一个点的坐标:在这个例子中,我使用x:50,y:50。

 <path d="M10,10 Q50,50 90,90" />

现在您可以使用T命令:

svg{border:1px solid}
path{fill:none; stroke:black;}

<svg viewbox="0 0 250 150">
  <path d="M10,10 Q50,50 90,90T200,80" />
</svg>

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

1 年前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

1 年前

man · CSS-如何具有或模拟仅适用于内部的半径边框

1 年前

McLaren · 增加笔划宽度属性后,图标将被裁剪

1 年前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

1 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

1 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

1 年前

MarcelausZell · 调整svg的大小会导致额外的高度

1 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

1 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

1 年前