当前位置： 首页 > article >正文

7_HTML5 SVG (3) --[HTML5 API 学习之旅]

article 2024/12/23 20:39:39

SVG 直线

SVG（Scalable Vector Graphics）是一种用于描述二维图形的XML语言。在SVG中，<line>元素用于绘制直线。下面是关于如何使用<line>元素创建直线的讲解，并附有四个带有详细注释的示例代码。

示例1：简单的水平线

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一条简单的水平线。
    x1="0" y1="25": 线条的起点位于SVG画布左边缘0像素处，距离上边缘25像素的位置。
    x2="200" y2="25": 线条的终点位于SVG画布右边缘200像素处，同样距离上边缘25像素的位置。
    stroke="red": 设置线条的颜色为红色。
  -->
  <line x1="0" y1="25" x2="200" y2="25" stroke="red"/>
</svg>

在这里插入图片描述

示例2：垂直线

<svg width="50" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一条简单的垂直线。
    x1="25" y1="0": 线条的起点位于SVG画布距离左边缘25像素处，从上边缘0像素开始。
    x2="25" y2="200": 线条的终点仍然位于距离左边缘25像素处，但向下延伸至SVG画布底部200像素。
    stroke="blue": 设置线条的颜色为蓝色。
    stroke-width="3": 设置线条的宽度为3像素。
  -->
  <line x1="25" y1="0" x2="25" y2="200" stroke="blue" stroke-width="3"/>
</svg>

在这里插入图片描述

示例3：对角线

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一条从左下角到右上角的对角线。
    x1="0" y1="200": 线条的起点位于SVG画布左下角。
    x2="200" y2="0": 线条的终点位于SVG画布右上角。
    stroke="green": 设置线条的颜色为绿色。
    stroke-width="2": 设置线条的宽度为2像素。
  -->
  <line x1="0" y1="200" x2="200" y2="0" stroke="green" stroke-width="2"/>
</svg>

在这里插入图片描述

示例4：带箭头的线

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    定义一个标记（marker），用于在线条的终点添加箭头。
    id="arrow": 标记的唯一标识符。
    markerWidth="10" markerHeight="7": 定义标记的宽高。
    refX="10" refY="3.5": 指定标记的参考点，即箭头尖端的位置。
    orient="auto": 根据线条的方向自动旋转箭头。
  -->
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="red"/>
    </marker>
  </defs>
  
  <!-- 
    使用定义好的箭头标记。
    marker-end="url(#arrow)": 指定使用哪个标记作为线条的终点装饰。
  -->
  <line x1="20" y1="50" x2="180" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/>
</svg>

在这里插入图片描述

每个例子都展示了<line>元素的不同用法和一些额外的属性，如颜色、宽度以及如何使用标记来创建箭头效果。希望这些例子能够帮助你理解SVG中的直线是如何工作的。

SVG 多边形

SVG（Scalable Vector Graphics）允许通过<polygon>元素来绘制多边形。多边形是一系列连接的直线段，其起点和终点是相同的，从而形成一个封闭的形状。下面是对如何使用<polygon>元素创建多边形的讲解，并附有四个带有详细注释的示例代码。

示例1：等边三角形

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一个等边三角形。
    points属性定义了组成多边形的点序列，每个点由"x,y"表示，多个点之间用空格分隔。
    这里我们定义了三个点，它们构成了一个底边在下方的等边三角形。
  -->
  <polygon points="100,25 25,175 175,175" fill="none" stroke="black" stroke-width="2"/>
</svg>

在这里插入图片描述

示例2：矩形（非正方形）

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    使用<polygon>元素创建一个矩形（宽高不相等），即使通常我们会使用<rect>元素来创建矩形。
    此处的points定义了矩形的四个角的位置，依次为左上、右上、右下、左下。
  -->
  <polygon points="25,25 175,25 175,125 25,125" fill="yellow" stroke="red" stroke-width="3"/>
</svg>

在这里插入图片描述

示例3：五角星

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一个五角星。
    五角星由五个顶点构成，通过精心选择这些顶点的位置，我们可以创建出一个标准的五角星形状。
  -->
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="purple" stroke="white" stroke-width="2"/>
</svg>

在这里插入图片描述

示例4：六边形蜂巢图案

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一系列的六边形以模拟蜂巢图案。
    我们将重复使用<polygon>元素并调整points属性来定位每一个六边形。
    注意，这里只展示两个相邻的六边形，实际应用中可以根据需要复制更多的六边形。
  -->
  <polygon points="50,10 100,10 120,50 100,90 50,90 30,50" fill="orange" stroke="black" stroke-width="1"/>
  <polygon points="150,10 200,10 220,50 200,90 150,90 130,50" fill="orange" stroke="black" stroke-width="1"/>
</svg>

在这里插入图片描述

以上示例展示了如何使用<polygon>元素来创建不同类型的多边形，包括简单的几何图形如三角形和矩形，以及更复杂的形状如五角星和六边形。希望这些例子能够帮助你理解如何使用SVG中的多边形元素。

SVG 多段

SVG <polyline> 元素用于绘制由多个直线段连接成的开放路径。与<polygon>不同，<polyline>不封闭路径，因此它适合用来表示折线图、箭头等开放形状。下面是对如何使用<polyline>元素创建开放路径的讲解，并附有四个带有详细注释的示例代码。

示例1：简单的折线

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一条简单的折线。
    points属性定义了组成多边形的点序列，每个点由"x,y"表示，多个点之间用空格分隔。
    这里我们定义了四个点，它们构成了一个开放的折线。
  -->
  <polyline points="20,20 180,20 180,180 20,180" fill="none" stroke="blue" stroke-width="4"/>
</svg>

在这里插入图片描述

示例2：锯齿状线条

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    使用<polyline>元素创建锯齿状线条。
    此处的points定义了一系列的点，形成一个重复上升和下降的模式，模仿锯齿状的外观。
  -->
  <polyline points="10,90 40,10 70,90 100,10 130,90 160,10 190,90" fill="none" stroke="green" stroke-width="2"/>
</svg>

在这里插入图片描述

示例3：箭头

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一个指向右侧的箭头。
    箭头由两个部分组成：一根长线和顶部的三角形尖端。
    我们可以使用<polyline>来创建这两部分，通过调整points属性中的坐标来形成箭头形状。
  -->
  <polyline points="50,100 150,100" fill="none" stroke="black" stroke-width="4"/>
  <polyline points="150,80 150,100 170,100" fill="black" stroke="black" stroke-width="4"/>
</svg>

在这里插入图片描述

示例4：波浪线

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一条波浪线。
    波浪线是通过一系列的点模拟正弦波的形态。
    你可以调整points属性中各个点的位置来改变波浪的频率和振幅。
  -->
  <polyline points="10,50 50,70 90,50 130,30 170,50 210,70 250,50 290,30 330,50 370,70" fill="none" stroke="red" stroke-width="2"/>
</svg>

在这里插入图片描述

这些例子展示了<polyline>元素在创建各种开放路径图形时的灵活性。如果你需要创建非封闭的几何形状或者图表，<polyline>是一个非常有用且直观的工具。希望这些示例能够帮助你更好地理解和使用<polyline>元素。

SVG 路径

SVG <path> 元素是最强大的绘图元素之一，它允许你定义复杂的形状，包括直线、曲线和弧线。<path> 元素使用一个 d 属性来定义路径数据，该属性包含了绘制路径的指令。下面是对如何使用 <path> 元素创建复杂图形的讲解，并附有四个带有详细注释的示例代码。

示例1：简单的矩形

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    使用<path>绘制一个矩形。
    'M' 指令表示移动到指定位置而不绘制任何东西（绝对坐标）。
    'H' 和 'V' 分别表示水平和垂直绘制直线（绝对坐标）。
    'Z' 指令用于闭合路径，即从当前点画一条直线回到起点。
  -->
  <path d="M10,10 H190 V190 H10 Z" fill="none" stroke="black" stroke-width="4"/>
</svg>

在这里插入图片描述

示例2：贝塞尔曲线

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一个SVG画布，宽度和高度都设定为200px。
    'xmlns' 属性指定了SVG的命名空间，这是必需的。
  -->
  
  <!-- 
    使用<path>元素绘制一条由两个三次贝塞尔曲线组成的路径。
    'd' 属性包含了一串指令，这些指令定义了如何绘制路径。
    
    'M50,20' - 移动到 (50,20) 点。这是路径的起点，不会创建任何线段。
    
    'C50,20 150,20 150,120' - 绘制第一个三次贝塞尔曲线：
      - 第一个控制点与起始点相同，在 (50,20)，这意味着曲线从起点开始是直线。
      - 第二个控制点位于 (150,20)，它影响曲线的形状，但不是路径的一部分。
      - 终点在 (150,120)，这是曲线结束的地方。
      
    'S250,220 250,120' - 绘制第二个三次贝塞尔曲线（平滑连续曲线）：
      - 'S' 指令是 'C' 的简化版，它会自动使用上一个控制点的反射点作为当前命令的第一个控制点。
      - 因此这里只提供了一个控制点 (250,220) 和终点 (250,120)。
      - 这将创建一条从上一条曲线终点出发，经过给定控制点到达新终点的平滑曲线。
    
    fill="none" - 设置填充颜色为无，即不填充路径内部。
    stroke="blue" - 设置路径线条的颜色为蓝色。
    stroke-width="4" - 设置路径线条的宽度为4px。
  -->
  
  <path d="M50,20 C50,20 150,20 150,120 S250,220 250,120" fill="none" stroke="blue" stroke-width="4"/>
</svg>

在这里插入图片描述

示例3：圆弧路径

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    使用<path>绘制一个半圆形弧。
    'M' 指令移动到起始点 (100, 80)。
    'A' 指令用于绘制椭圆弧，其参数依次为：
      - 椭圆的x轴半径和y轴半径（这里是50,50，即一个圆弧）
      - x轴旋转角度（这里为0）
      - 大弧标志（0=小弧，1=大弧）
      - 扫描方向（0=顺时针，1=逆时针）
      - 终点坐标
  -->
  <path d="M100,80 A50,50 0 1,0 100,180" fill="none" stroke="green" stroke-width="4"/>
</svg>

在这里插入图片描述

示例4：组合路径

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    创建一个由多个路径指令组成的复杂图形。
    这里我们结合了多种路径指令来创建一个更复杂的形状。
    包括移动 ('M')、直线 ('L')、水平和垂直线 ('H', 'V')、以及闭合路径 ('Z')。
  -->
  <path d="M10,10 L90,90 H190 V10 L10,10 Z" fill="yellow" stroke="red" stroke-width="4"/>
</svg>

在这里插入图片描述

这些例子展示了 <path> 元素在创建各种复杂形状时的强大功能。通过组合不同的路径指令，你可以创建几乎任何类型的二维图形。


http://www.kler.cn/a/448375.html

相关文章：

  • dockerfile文档编写（3）：构建失败后清理缓存（删除容器和镜像相关命令）
  • Oracle 数据库函数的用法（一）
  • 高效处理PDF文件的终极工具：构建一个多功能PDF转换器
  • Marin说PCB之POC电路layout设计仿真案例---06
  • 3D工具显微镜的测量范围
  • LeetCode 热题 100_K 个一组翻转链表（31_25_困难_C++）(四指针法)
  • 【深入理解@ExceptionHandler】
  • 深圳龙岗戴尔dell r730xd服务器故障维修
  • springboot vue 会员收银系统 含源码 开发流程
  • 网络安全怎么学习
  • 【ArcGIS Pro微课1000例】0063：处理无人机数据（空三、生成DOM、DSM、DTM）
  • QT绘制同心扇形
  • 小雅Alist缓存太多怎么清理？教程来了
  • ajax中get和post的区别，datatype返回的数据类型有哪些？web开发中数据提交的几种方式，有什么区别。
  • powerdesigner导入sql脚本，生成物理模型,并显示comment名
  • 【html网页页面013】html+css制作节日主题圣诞节网页含视频、留言表单（独创首发-5页面附效果及源码）
  • SmartX分享：SMTX ZBS 中 RDMA 技术简介
  • springboot470基于协同过滤算法的东北特产销售系统的实现(论文+源码)_kaic
  • 优先队列【东北大学oj数据结构9-3】C++
  • 【故障处理系列--gitlab的CI流水线下载安装包提示报错】
  • 【Rust自学】3.6. 控制流：循环
  • 苍穹外卖-day05redis 缓存的学习
  • GFPS扩展技术原理（七）-音频切换消息流
  • 探索 JSON 数据在关系型数据库中的应用：MySQL 与 SQL Server 的对比
  • Obfuscator使用心得
  • 《开启微服务之旅：Spring Boot Web开发》（二）