⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 svg path.htm

📁 SVG教程
💻 HTM
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0043)http://www.w3school.com.cn/svg/svg_path.asp -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>SVG <path></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=zh-cn>
<META content=all name=robots>
<META content=w3school.com.cn name=author>
<META content="Copyright W3school.com.cn All Rights Reserved." name=Copyright>
<META content=true name=MSSmartTagsPreventParsing>
<META http-equiv=imagetoolbar content=false><LINK href="SVG path_files/c1.css" 
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.3790.4134" name=GENERATOR></HEAD>
<BODY id=xml>
<DIV id=wrapper>
<DIV id=header>
<H1><A title=点击此处，返回首页 
href="http://www.w3school.com.cn/index.html">w3school在线教程</A></H1></DIV>
<DIV id=navfirst>
<UL id=menu>
  <LI id=h><A title=HTML教程 href="http://www.w3school.com.cn/h.asp">HTML教程</A> 
  </LI>
  <LI id=x><A title=XML教程 href="http://www.w3school.com.cn/x.asp">XML教程</A> 
</LI>
  <LI id=b><A title=浏览器脚本 href="http://www.w3school.com.cn/b.asp">浏览器脚本</A> 
</LI>
  <LI id=s><A title=服务器脚本 href="http://www.w3school.com.cn/s.asp">服务器脚本</A> 
</LI>
  <LI id=d><A title="dot net教程" href="http://www.w3school.com.cn/d.asp">dot 
  net教程</A> </LI>
  <LI id=m><A title=多媒体教程 href="http://www.w3school.com.cn/m.asp">多媒体教程</A> 
</LI>
  <LI id=w><A title=建站手册 href="http://www.w3school.com.cn/w.asp">建站手册</A> 
</LI></UL></DIV>
<DIV id=navsecond>
<DIV id=course>
<H2>SVG 基础</H2>
<UL>
  <LI><A title="SVG 首页" href="http://www.w3school.com.cn/svg/index.asp">SVG 
  首页</A> 
  <LI><A title="SVG 简介" href="http://www.w3school.com.cn/svg/svg_intro.asp">SVG 
  简介</A> 
  <LI><A title="SVG 实例" 
  href="http://www.w3school.com.cn/svg/svg_example.asp">SVG 实例</A> 
  <LI><A title=在HTML文档中的SVG 
  href="http://www.w3school.com.cn/svg/svg_inhtml.asp">SVG in HTML</A> </LI></UL>
<H2>SVG 形状</H2>
<UL>
  <LI><A title="SVG 矩形" href="http://www.w3school.com.cn/svg/svg_rect.asp">SVG 
  矩形</A> 
  <LI><A title="SVG 圆形" href="http://www.w3school.com.cn/svg/svg_circle.asp">SVG 
  圆形</A> 
  <LI><A title="SVG 椭圆" 
  href="http://www.w3school.com.cn/svg/svg_ellipse.asp">SVG 椭圆</A> 
  <LI><A title="SVG 线条" href="http://www.w3school.com.cn/svg/svg_line.asp">SVG 
  线条</A> 
  <LI><A title="SVG 多边形" 
  href="http://www.w3school.com.cn/svg/svg_polygon.asp">SVG 多边形</A> 
  <LI><A title="SVG 折线" 
  href="http://www.w3school.com.cn/svg/svg_polyline.asp">SVG 折线</A> 
  <LI><A title="SVG 路径" href="http://www.w3school.com.cn/svg/svg_path.asp">SVG 
  路径</A> </LI></UL>
<H2>SVG 滤镜</H2>
<UL>
  <LI><A title="SVG 滤镜简介" 
  href="http://www.w3school.com.cn/svg/svg_filters_intro.asp">SVG 滤镜简介</A> 
  <LI><A title="SVG 高斯滤镜" 
  href="http://www.w3school.com.cn/svg/svg_filters_gaussian.asp">SVG 高斯滤镜</A> 
  </LI></UL>
<H2>SVG 渐变</H2>
<UL>
  <LI><A title="SVG 线形渐变" 
  href="http://www.w3school.com.cn/svg/svg_grad_linear.asp">SVG 线形渐变</A> 
  <LI><A title="SVG 放射渐变" 
  href="http://www.w3school.com.cn/svg/svg_grad_radial.asp">SVG 放射渐变</A> 
</LI></UL>
<H2>SVG 实例</H2>
<UL>
  <LI><A title="SVG 实例" 
  href="http://www.w3school.com.cn/svg/svg_examples.asp">SVG 实例</A> </LI></UL>
<H2>SVG 参考</H2>
<UL>
  <LI><A title="SVG 元素" 
  href="http://www.w3school.com.cn/svg/svg_reference.asp">SVG 元素</A> 
</LI></UL></DIV>
<DIV id=selected>
<H2>建站手册</H2>
<UL>
  <LI><A title=网站构建 href="http://www.w3school.com.cn/site/index.asp">网站构建</A> 
  <LI><A title=W3C href="http://www.w3school.com.cn/w3c/index.asp">万维网联盟</A> 
  <LI><A title=浏览器信息 
  href="http://www.w3school.com.cn/browsers/index.asp">浏览器信息</A> 
  <LI><A title=网站品质 href="http://www.w3school.com.cn/quality/index.asp">网站品质</A> 

  <LI><A title=语义网 href="http://www.w3school.com.cn/semweb/index.asp">语义网</A> 
  <LI><A title=职业规划 href="http://www.w3school.com.cn/careers/index.asp">职业规划</A> 

  <LI><A title=网站主机 href="http://www.w3school.com.cn/hosting/index.asp">网站主机</A> 
  </LI></UL></DIV></DIV>
<DIV id=maincontent>
<H2>SVG &lt;path&gt;</H2>
<DIV id=tpn>
<UL class=prenext>
  <LI class=pre><A 
  href="http://www.w3school.com.cn/svg/svg_polyline.asp">Previous Page</A> </LI>
  <LI class=next><A 
  href="http://www.w3school.com.cn/svg/svg_filters_intro.asp">Next Page</A> 
</LI></UL></DIV>
<DIV class=intro>
<P><STRONG>&lt;path&gt; 标签用来定义路径。</STRONG></P></DIV>
<DIV>
<H3>&lt;path&gt; 标签</H3>
<P>&lt;path&gt; 标签用来定义路径。</P>
<P>下面的命令可用于路径数据：</P>
<UL>
  <LI>M = moveto 
  <LI>L = lineto 
  <LI>H = horizontal lineto 
  <LI>V = vertical lineto 
  <LI>C = curveto 
  <LI>S = smooth curveto 
  <LI>Q = quadratic Belzier curve 
  <LI>T = smooth quadratic Belzier curveto 
  <LI>A = elliptical Arc 
  <LI>Z = closepath </LI></UL>
<P class=note><SPAN>注释：</SPAN>以下所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。</P>
<P>请把下面的代码拷贝到记事本，然后把文件保存为"path1.svg"。把此文件放入您的web目录：</P><PRE>&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;

&lt;svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"&gt;

&lt;path d="M250 150 L150 350 L350 350 Z" /&gt;

&lt;/svg&gt;</PRE>
<P>上面的例子定义了一条路径，它开始于位置250 150，到达位置150 350，然后从那里开始到350 350，最后在250 150关闭路径。</P>
<P><A href="http://www.w3school.com.cn/svg/path1.svg">查看例子</A></P>
<P>下面的例子创建了一个螺旋：</P><PRE>&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;

&lt;svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"&gt;

&lt;path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/&gt;

&lt;/svg&gt;</PRE>
<P><A href="http://www.w3school.com.cn/svg/path2.svg">查看例子</A></P>
<P>很复杂吧？是的！！！由于绘制路径的复杂性，因此强烈建议您使用SVG编辑器来创建复杂的图形。</P></DIV>
<DIV id=bpn>
<UL class=prenext>
  <LI class=pre><A 
  href="http://www.w3school.com.cn/svg/svg_polyline.asp">Previous Page</A> </LI>
  <LI class=next><A 
  href="http://www.w3school.com.cn/svg/svg_filters_intro.asp">Next Page</A> 
</LI></UL></DIV></DIV>
<DIV id=sidebar>
<DIV id=searchui>
<FORM id=searchform action=http://www.google.com/search method=get>
<P><LABEL for=searched_content>Search:</LABEL></P>
<P><INPUT type=hidden value=www.w3school.com.cn name=sitesearch></P>
<P><INPUT class=box id=searched_content title=在此输入搜索内容。 name=as_q> <INPUT class=button title=搜索！ type=submit value=Go> </P></FORM></DIV>
<DIV id=tools>
<H5 id=tools_reference><A 
href="http://www.w3school.com.cn/svg/svg_reference.asp">SVG 参考手册</A></H5>
<H5 id=tools_example><A 
href="http://www.w3school.com.cn/example/svge_examples.asp">SVG 
实例</A></H5></DIV>
<DIV id=books></DIV></DIV>
<DIV id=footer>
<P>W3School提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款和隐私条款。</P>
<P>版权所有，保留一切权利。未经书面许可，不得转载。W3School(s)简体中文版授权上海蒙信网络科技有限公司在中华人民共和国运营。</P></DIV></DIV></BODY></HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -