html path标签的作用

一时失言乱红尘 2022-05-28 10:27 360阅读 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 条评论，360人围观）

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

相关阅读

相关 add to build path的作用

.首先要了解classpath，即Java编译后的类或者jar包路径。Java虚拟机会从classpath中找到运行所需的类。 2.Java虚拟机无法找到刚添加的jar...

古城微笑少年丶/ 2024年04月17日 15:25/ 0 赞/ 40 阅读

相关＜selectKey＞标签的作用

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

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

相关 HTML：head标签及作用

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

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

相关 (4)表格的html标签,html标签之表格标签

HTML表格组成: 由 <table> <tbody> <tr> <th>或</th> <td>标签：标签中；</td> </tr> <

叁歲伎倆/ 2022年10月19日 15:56/ 0 赞/ 275 阅读

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

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

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

相关 classpath、path、JAVA_HOME的作用

<table style="table-layout: fixed; width: 100%;"> <tbody> <tr> <td> <div>

た入场券/ 2022年07月13日 16:25/ 0 赞/ 132 阅读

相关标签的作用

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

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

相关 html path标签的作用

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

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

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

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

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

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

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

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