上一节:
下一节:

  SVG 路径

  • 定义和使用

    <path> 元素用于定义路径。
    以下命令可用于路径数据:
    • M = 移至
    • L = 线到
    • H = 水平线
    • V = 垂直线
    • C = 曲线到
    • S = 平滑曲线
    • Q = 二次贝塞尔曲线
    • T = 光滑二次贝塞尔曲线
    • A = 椭圆弧
    • Z = 封闭路径
    注意:上面所有命令也可以用小写字母表示。 大写字母表示绝对定位,小写字母表示相对定位。
  • 示例

    下面的示例定义了一条路径,该路径从位置 150,0 开始,并有一条线到达位置 75,200,然后从该位置开始,有一条线到达225,200,最后关闭该路径回到 150,0:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp;
    下面是 SVG 代码
    示例1
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 路径</h1>
      <svg height="210" width="400">
        <path d="M150 0 L75 200 L225 200 Z" style="fill:lime;stroke:purple;stroke-width:1" />
      </svg>
    </body>
    </html>
    
    尝试一下
    贝塞尔曲线用于建模可以无限缩放的平滑曲线;通常,用户选择两个端点和一个或两个控制点;具有一个控制点的贝塞尔曲线称为二次贝塞尔曲线,具有两个控制点的贝塞尔曲线称为三次曲线。
    下面的示例创建一个二次贝塞尔曲线,其中 A 和 C 是起点和终点,B 是控制点:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp; &nbsp; &nbsp; &nbsp; A B C
    下面是 SVG 代码
    示例2
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 路径</h1>
      <svg height="400" width="450">
        <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
        stroke-width="3" fill="none" />
        <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
        stroke-width="3" fill="none" />
        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
        fill="none" />
        <path d="M 100 350 q 150 -300 300 0" stroke="blue"
        stroke-width="5" fill="none" />
        <g stroke="black" stroke-width="3" fill="black">
          <circle id="pointA" cx="100" cy="350" r="3" />
          <circle id="pointB" cx="250" cy="50" r="3" />
          <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
        text-anchor="middle">
          <text x="100" y="350" dx="-30">A</text>
          <text x="250" y="50" dy="-10">B</text>
          <text x="400" y="350" dx="30">C</text>
        </g>
      </svg>
    </body>
    </html>
    
    尝试一下
上一节:
下一节: