SVG path路径学习一

最新推荐文章于 2024-04-04 05:28:17 发布

原创最新推荐文章于 2024-04-04 05:28:17 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#svg #svg贝塞尔曲线

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了SVG中的基本路径指令，包括三次贝塞尔曲线(C)、直线(L)及平滑的曲线(S)指令的使用方法，并通过具体示例展示了这些指令如何绘制不同的图形。

10个SVG指令

用一个简单的三次贝塞尔曲线来做例子：
指令C如下图
指令C

<svg id="svg" width="200" height="100" style="border: 1px solid darkorange;">
    <desc>简易三次贝塞尔曲线</desc><defs></defs>
    <path d="M20 20 C90 40, 130 40, 180 20" stroke="#000000" fill="none" stroke-width="2"></path>
    <!--M起始点X 起始点y C控制点x1,y1 x2,y2 终点x,y -->
    <text x="90" y="60">A罩</text>
</svg>

代码如图：
这里写图片描述

同理指令L

<svg width="100" height="100" style="border: 1px solid darkorange;">
    <path d="M10 10 L90 90" stroke="#000000" stroke-width="5"></path>
</svg>

代码如图：
这里写图片描述

指令CS组合：
CS组合时，S指令会自动补出一个对称的控制点（蓝线部分）
这里写图片描述

<svg width="190px" height="160px" version="1.1" style="border: 1px solid darkorange;">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" stroke-width="2" fill="transparent"/>   
</svg>