美文网首页
svg path 路径规则

svg path 路径规则

作者: 很好就这样吧 | 来源:发表于2023-05-28 09:57 被阅读0次

命令      名称                                       参数
 M        moveto             移动到                  (x y)
 Z        closepath          关闭路径                (none)
 L        lineto             画线到                  (x y)
 H        horizontal lineto  水平线到                 x
 V        vertical lineto    垂直线到                 y
 A        elliptical         arc椭圆弧               (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
 C        curveto            三次贝塞尔曲线到          (x1 y1 x2 y2 x y)
 S        smooth curveto     光滑三次贝塞尔曲线到       (x2 y2 x y)
 Q        Bézier curveto     二次贝塞尔曲线到          (x1 y1 x y)
 T        smooth Bézier curveto光滑二次贝塞尔曲线到     (x y)
A(elliptical Arc)弧形

rx ry 分别是是椭圆的x轴半径和y轴半径。
x-axis-rotation 是椭圆相对于坐标系的旋转角度。
large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
x y 是圆弧终点的坐标。
例: M 120 45 A 60 45 0 0 0 80 125, 效果如下图


M 120 45 A 60 45 0 0 0 80 125

PS:如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。

<path d="M150 0 L75 200 L225 200 Z" fill="red" stroke="blue" stroke-width="10"/>

相关文章

  • 用svg动态绘制图形

    以此前对svg的了解,就是通过rect/circle/line……等绘制规则图形,或者利用path路径来绘制更...

  • SVG 路径 -

    元素用于定义一个路径。下面的命令可用于路径数据:M = movetoL = linetoH = horizonta...

  • Android 自定义View之Path

    Path用途: 按照路径的规则在路径上绘制自定义图形 在使用Path之前我们需要先了解Path的填充规则和绘制方向...

  • D3.js学习笔记(6)--写个饼图

    SVG基础 g标签 作用:将相关元素组合在一起的容器 path标签 path标签可以说是svg中的精华所在,路径元...

  • 9.svg 动画 相关文章

    超级强大的SVG SMIL animation动画详解;深度掌握SVG路径path的贝塞尔曲线指令 2.拿来就能用...

  • png/jpg图片转SVG格式完美方法

    前言: 之前做svg动画的时候用到图片转svg path路径,网上找了很多相关的, 也用过几个在线转换的网址,...

  • 不可思议的CSS之CLIP-PATH运用彩虹特效

    clip-path介绍: clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域...

  • 动画相关

    打破盒子模式的限制,使用Clip-Path创建响应式图形 CSS3/SVG clip-path路径剪裁遮罩属性简介...

  • Simplify Path(化简路径)

    https://leetcode.com/problems/simplify-path/根据linux的路径规则,...

  • SVG路径中“d”属性的A指令用来绘制圆弧

    SVG中的路径数据,即path元素的 d 属性,有一系列的路径绘制指令,其中椭圆弧指令(A)最复杂,不算椭圆弧起始...

网友评论

      本文标题:svg path 路径规则

      本文链接:https://www.haomeiwen.com/subject/nfbhedtx.html