SVG Path

SVG Path (SVG路径)

Description of the <path> element

Description of the <path> element

The SVG <path> element specifies a path.

Paths are used to create complex shapes combining several straight or curved lines. Complex shapes that consist only of straight lines can be created as polylines. Polylines and paths create similar shapes. However, polylines need smaller straight lines for simulating curves. (路径用于创建结合几条直线或曲线的复杂形状。仅由直线组成的复杂形状可以创建为折线。折线和路径创建相似的形状。然而,折线需要更小的直线来模拟曲线。)

Creating complex paths using an XML editor or text editor is not suggested, because understanding how they work helps to notice and fix display issues in SVGs. (不建议使用XML编辑器或文本编辑器创建复杂的路径,因为了解它们的工作原理有助于发现和修复SVG中的显示问题。)

The shape of a path element is specified by one parameter: d containing other commands and parameters used by those commands. You can find the list of the commands below: (路径元素的形状由一个参数指定: d包含这些命令使用的其他命令和参数。您可以在下面找到命令列表:)

  • M = moveto

  • L = lineto

  • H = horizontal lineto

  • V = vertical lineto (- V =垂直lineto)

  • C = curveto

  • S = smooth curveto (- S =平滑曲线)

  • Q = quadratic Bézier curve (- Q =二次贝塞尔曲线)

  • T = smooth quadratic Bézier curveto (- T =平滑二次贝塞尔曲线)

  • A = elliptical Arc (- A =椭圆弧)

  • Z = closepath (- Z =关闭路径)

All of these commands can also be executed with lower letters. Capital letters mean an absolutely positioned shape, whereas lower cases mean a relatively positioned shape. (所有这些命令也可以用小写字母执行。大写字母表示绝对定位的形状,而小写字母表示相对定位的形状。)

Example of the SVG <path> element:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <svg  width="300" height="250">
     <path d="M190 40 L115 240 L265 240 Z" />
     Sorry, inline SVG is not supported by your browser..
(抱歉,您的浏览器不支持内联SVG。)
   </svg>
 </body>
</html>


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部