html path标签的作用

一时失言乱红尘 2022-05-28 10:27 437阅读 0赞

<path> 标签用来定义路径。

## <path> 标签 ##

<path> 标签用来定义路径。

下面的命令可用于路径数据：

*  M = moveto
 *  L = lineto
 *  H = horizontal lineto
 *  V = vertical lineto
 *  C = curveto
 *  S = smooth curveto
 *  Q = quadratic Belzier curve
 *  T = smooth quadratic Belzier curveto
 *  A = elliptical Arc
 *  Z = closepath

**注释：**以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

请把下面的代码拷贝到记事本，然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录：

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <path d="M250 150 L150 350 L350 350 Z" />
    
    </svg>

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

[查看例子][Link 1]

下面的例子创建了一个螺旋：

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <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"/>
    
    </svg>

[查看例子][Link 2]

很复杂吧？是的！！！由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形。

以上内容来自于w3shooll

[Link 1]: http://www.w3school.com.cn/svg/path1.svg
[Link 2]: http://www.w3school.com.cn/svg/path2.svg

发表评论取消回复

表情：

评论列表（有 0 条评论，437人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5中td标签的作用及编程示例

HTML（超文本标记语言）是用于构建网页结构的标准标记语言。在HTML中，td标签用于定义HTML表格中的数据单元格（table data cell）。每个td元素位于tr（表

ゝ一纸荒年。/ 2023年10月16日 11:51/ 0 赞/ 18 阅读

相关 HTML中的 label 标签：一个不起眼却有点小作用的标签

标签为 input 元素定义标注（标记）作用是为鼠标用户改进了可用性，当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上； ① label 元素不

小咪咪/ 2023年02月18日 03:03/ 0 赞/ 30 阅读

相关＜selectKey＞标签的作用

作用：一些情况下，新增一条数据信息，但其主键（id）是数据库自动在数据库生成（自增），而有些业务逻辑的处理是需要要到这个生成的主键（id）。标签就是用来获取这个生

待我称王封你为后i/ 2022年12月09日 01:51/ 0 赞/ 170 阅读

相关 HTML：head标签及作用

head标签 title：定义不同文档的标题 base：定义所有链接的URL link：定义文档与外部资源之间的关系 style：定义HTML文档

水深无声/ 2022年11月17日 05:29/ 0 赞/ 212 阅读

相关 html5标签seo的作用,HTML标签的合理使用对SEO的影响

既然是做网站，相信站长们对HTML标签早已了然于胸，但有一些HTML标签直接影响你的网页收录以及页面的权重，这您是否又全部都了解呢?下面小编来细细道来，分析一下哪些HTML标签

ゝ一纸荒年。/ 2022年10月06日 13:50/ 0 赞/ 208 阅读

相关 Build Path的作用

在eclips里在工程名上右键->build path->contigure bud path->java build path里有个 libraries->add exte

迷南。/ 2022年08月19日 08:47/ 0 赞/ 21 阅读

相关标签的作用

<META> 是放于 <HEAD> 与 </HEAD>之间的标记，功用与变化等对，所以我公式化地介绍。 <meta name="Description" conte

╰半夏微凉°/ 2022年06月16日 03:27/ 0 赞/ 470 阅读

相关 html path标签的作用

<path> 标签用来定义路径。 <path> 标签 <path> 标签用来定义路径。下面的命令可用于路径数据： M = moveto L = lin

一时失言乱红尘/ 2022年05月28日 10:27/ 0 赞/ 438 阅读

相关 HTML中a标签的几大作用

在学习行级标签的时候总结有三大最为重要的行级标签，分别为：a标签；span标签；img标签。现在主要总结一下a标签的几大应用场景。一：外部页面链接外部页面链接需要一

青旅半醒/ 2022年05月18日 00:04/ 0 赞/ 266 阅读

相关 HTML中th标签的作用(t1)

哎，最近学的很烦，都不想敲代码了，准备写点小知识点，作为一个系列吧，括号内带t就是代表这个系列啦，会更新到我敲不动代码那天，先看代码，学习AngularJs中的小demo：

古城微笑少年丶/ 2022年05月15日 10:49/ 0 赞/ 337 阅读