突破编程_前端_SVG（基础元素介绍）

1 rect 矩形

在 SVG 中，<rect> 元素用于创建圆形。

（1）基本语法

<rectx="x坐标"y="y坐标"width="宽度"height="高度"rx="可选：圆角x半径"ry="可选：圆角y半径"fill="可选：填充颜色"stroke="可选：描边颜色"stroke-width="可选：描边宽度"... />
  1. x, y ：这两个属性定义了矩形左上角的坐标。默认值是 0。
  2. width, height ：这两个属性定义了矩形的宽度和高度。
  3. rx, ry ：这两个属性可选，用于定义矩形的圆角半径。如果 rx 和 ry 相同，则矩形四个角都是相同的圆角；如果不同，则左上角和右下角的圆角半径为 rx，右上角和左下角的圆角半径为 ry。
  4. fill ：定义矩形的填充颜色。如果不设置此属性，矩形将默认透明。
  5. stroke ：定义矩形的描边颜色。如果不设置此属性，矩形将没有描边。
  6. stroke-width ：定义矩形的描边宽度。默认值是 1。

（2）示例

<svg width="200" height="200"><rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这里插入图片描述

在这个示例中，我们创建了一个 200x200 的 SVG 画布，并在其中绘制了一个矩形。矩形的左上角坐标是 (10, 10)，宽度是 100，高度是 50。矩形被填充为蓝色，描边为黑色，描边宽度为 2。

2 circle 圆形

在 SVG 中，<circle> 元素用于创建圆形。

（1）基本语法

<circlecx="圆心x坐标"cy="圆心y坐标"r="半径"fill="可选：填充颜色"stroke="可选：描边颜色"stroke-width="可选：描边宽度"... />
  1. cx, cy ：这两个属性定义了圆心的x和y坐标。它们是<circle>元素的核心属性，决定了圆的位置。如果省略这些属性，圆心将默认为(0, 0)。
  2. r ：这个属性定义了圆的半径。半径决定了圆的大小。
  3. fill ：这个属性用于设置圆的填充颜色。如果不设置，圆将默认为透明。
  4. stroke ：这个属性用于设置圆的描边颜色。如果不设置，圆将没有描边。
  5. stroke-width ：这个属性用于设置圆的描边宽度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为1。

（2）示例

<svg width="200" height="200"><circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="3" />
</svg>

在这里插入图片描述

在这个示例中，我们创建了一个 200x200 的SVG画布，并在其中绘制了一个圆形。圆心的坐标是 (100, 100)，半径是 50。圆形被填充为红色，描边为黑色，描边宽度为 3。

3 ellipse 椭圆形

在SVG中，<ellipse> 元素用于绘制椭圆，椭圆是高度和宽度不相等的圆，换句话说，它在 x 和 y 方向上的半径是不同的。

（1）基本语法

<ellipsecx="圆心x坐标"cy="圆心y坐标"rx="横向半径"ry="纵向半径"fill="可选：填充颜色"stroke="可选：描边颜色"stroke-width="可选：描边宽度"... />

  1. cx, cy ：这两个属性定义了椭圆的圆心的 x 和 y 坐标。它们决定了椭圆在 SVG 画布上的位置。

  2. rx, ry ：这两个属性分别定义了椭圆的横向半径和纵向半径。rx 是椭圆在x轴方向上的半径，ry 是椭圆在 y 轴方向上的半径。它们共同决定了椭圆的大小和形状。如果 rx 和 ry 的值相同，则绘制的图形是一个圆。

  3. fill ：这个属性用于设置椭圆的填充颜色。如果不设置，椭圆将默认为透明。

  4. stroke ：这个属性用于设置椭圆的描边颜色。如果不设置，椭圆将没有描边。

  5. stroke-width ：这个属性用于设置椭圆的描边宽度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为1。

（2）示例

<svg width="200" height="200"><ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这里插入图片描述

在这个示例中，我们创建了一个 200x200 的SVG画布，并在其中绘制了一个椭圆。椭圆的圆心坐标是 (100, 100)，横向半径是 50，纵向半径是 30。椭圆被填充为蓝色，描边为黑色，描边宽度为 2。

4 line 线条

在SVG中，<line> 元素用于创建线段。线段是最基本的图形元素之一，由两个端点确定其位置和长度。

（1）基本语法

<linex1="起点x坐标"y1="起点y坐标"x2="终点x坐标"y2="终点y坐标"stroke="可选：描边颜色"stroke-width="可选：描边宽度"... />

  1. x1, y1 ：这两个属性定义了线段的起始点的 x 和 y 坐标。它们是创建线段所必需的基本属性。

  2. x2, y2 ：这两个属性定义了线段的终点的 x 和 y 坐标。与 x1 和 y1 一起，它们共同确定了线段的长度和方向。

  3. stroke ：这个属性用于设置线段的描边颜色。如果不设置，线段将没有可见的描边。

  4. stroke-width ：这个属性用于设置线段的描边宽度。描边宽度决定了线段边缘的粗细程度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为 1。

（2）示例

<svg width="200" height="200"><line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>

在这里插入图片描述

在这个示例中，我们创建了一个200x200的SVG画布，并在其中绘制了一条线段。线段的起始点坐标是(50, 50)，终点坐标是(150, 150)。线段被描边为黑色，描边宽度为2。

5 polygon 多边形

在SVG中，<polygon> 元素用于创建多边形，多边形是由一系列直线段首尾相接形成的闭合图形。

（1）基本语法

<polygonpoints="x1,y1 x2,y2 x3,y3 ... xn,yn"fill="可选：填充颜色"stroke="可选：描边颜色"stroke-width="可选：描边宽度"... />

在这里插入图片描述

  1. points ：这个属性定义了多边形每个顶点的坐标。每个顶点的坐标由 x 和 y 值组成，并且多个顶点坐标之间用空格分隔。例如，points=“0,0 100,0 100,100 0,100” 定义了一个矩形。

  2. fill ：这个属性用于设置多边形的填充颜色。如果不设置，多边形将默认为透明。

  3. stroke ：这个属性用于设置多边形的描边颜色。如果不设置，多边形将没有描边。

  4. stroke-width ：这个属性用于设置多边形的描边宽度。描边宽度决定了多边形边缘的粗细程度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为 1。

（2）示例

<svg width="200" height="200"><polygon points="50,50 150,50 150,150 50,150" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个200x200的 SVG 画布，并在其中绘制了一个四边形（矩形）。多边形的顶点坐标分别是(50,50)、(150,50)、(150,150)和(50,150)，形成了一个闭合的四边形。多边形被填充为蓝色，描边为黑色，描边宽度为 2。

6 path 路径

SVG的 <path> 元素是 SVG 中最强大且最灵活的形状元素之一。它允许你使用一系列的命令来绘制复杂的路径，包括直线、曲线以及它们的组合。

（1）基本语法

<pathd="绘制命令+参数"fill="可选：填充颜色"stroke="可选：描边颜色"stroke-width="可选：描边宽度"... />

d 属性是 <path> 元素的核心，它包含了绘制路径所需的命令和参数。这些命令可以是移动到一个点（M/m）、绘制直线（L/l）、绘制水平线或垂直线（H/h 和 V/v）、绘制曲线（A/a、Q/q、T/t、C/c、S/s）等。每个命令后面跟着相应的参数，这些参数定义了路径的形状。

示例命令：

  • M/m ：移动到指定坐标。大写 M 表示绝对位置，小写 m 表示相对位置。
  • L/l ：从当前位置绘制直线到指定坐标。大写 L 表示绝对坐标，小写 l 表示相对坐标。
  • H/h ：绘制水平线到指定 x 坐标。
  • V/v ：绘制垂直线到指定 y 坐标。
  • A/a ：绘制椭圆弧。大写 A 使用绝对坐标，小写 a 使用相对坐标。
  • Q/q ：绘制二次贝塞尔曲线。
  • T/t ：通过平滑控制点绘制二次贝塞尔曲线。
  • C/c ：绘制三次贝塞尔曲线。
  • S/s ：通过平滑控制点绘制三次贝塞尔曲线。
  • Z/z ：闭合路径，使路径的起点和终点相连。

（2）示例

<svg width="200" height="200"><path d="M 50 50 L 150 50 L 150 150 L 50 150 Z" fill="none" stroke="black" stroke-width="2" />
</svg>

在这里插入图片描述

在这个示例中，我们创建了一个正方形路径。命令 M 50 50 将起始点移动到 (50, 50)，然后 L 150 50 绘制一条直线到 (150, 50)，接着 L 150 150 到 (150, 150)，最后 L 50 150 到 (50, 150)，Z 命令闭合路径，形成一个完整的正方形。路径没有填充（fill=“none”），描边为黑色（stroke=“black”），描边宽度为 2（stroke-width=“2”）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/798595.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用可视化案例讲Rust编程5.用泛型和特性实现自适配绘制和颜色设置

用可视化案例讲Rust编程5.用泛型和特性实现自适配绘制和颜色设置

上一节我们讲了用泛型实现返回结果&#xff0c;这一节我们来讲讲在函数签名里面使用泛型来对输入参数进行自适配。 先看UML设计图&#xff1a; 好吧&#xff0c;看起来有点复杂&#xff0c;我们一个个来解释。 首先定义的是一个生成绘图元素需要的参数结构,并且定义个特性&am…
阅读更多...
Spring Security——09，解决跨域

Spring Security——09，解决跨域

解决跨域 一、SpringBoot配置二、配置SpringSecurity三、修改端口四、修改vue项目4.1 拿到token4.2 前端存储token4.3 前端请求头携带token 五、测试5.1 认证测试5.2 授权测试 一键三连有没有捏~~ 浏览器出于安全的考虑&#xff0c;使用 XMLHttpRequest对象发起 HTTP请求时必须…
阅读更多...
day 74 js

day 74 js

js脚本 JS的作用&#xff1a; 描述显示的内容&#xff08;HTML&#xff09;修饰 HTML 标签&#xff08;CSS&#xff09;设置 HTML 标签的动作&#xff08;JS&#xff09;JS特点&#xff1a;基于对象的编程语言&#xff0c;通过浏览器解释执行作用&#xff1a;表单验证、改变标签…
阅读更多...
使用阿里云服务器可以做什么？太多了

使用阿里云服务器可以做什么？太多了

阿里云服务器可以干嘛&#xff1f;能干啥你还不知道么&#xff01;简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;阿里云百科aliyunbaike.com整理阿里云服务器的用途&#xff1a; 阿里云服务器活动 aliyunbaike.com…
阅读更多...
AcWing 4. 多重背包问题 I

AcWing 4. 多重背包问题 I

解题思路 相关思路 import java.util.Scanner; public class Main {public static void main(String[] args){Scanner scanner new Scanner(System.in);int N scanner.nextInt();int V scanner.nextInt();int v[] new int[N1];int w[] new int[N1];int s[] new int[N1];…
阅读更多...
揭秘AI幻觉：GPT-4V存在视觉编码漏洞，清华联合NUS提出LLaVA-UHD

揭秘AI幻觉：GPT-4V存在视觉编码漏洞，清华联合NUS提出LLaVA-UHD

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 GPT-4V 的推出引爆了多模态大模型的研究。GPT-4V 在包括多模态问答、推理、交互在内的多个领…
阅读更多...
二. CUDA编程入门-双线性插值计算

二. CUDA编程入门-双线性插值计算

目录 前言0. 简述1. 执行一下我们的第十个CUDA程序2. Bilinear interpolation3. 代码分析总结参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 Note&#xff1a;关于 CUDA 加速双线程插值的内容博主…
阅读更多...
爬虫逆向非对称加密和对称加密案例

爬虫逆向非对称加密和对称加密案例

注意&#xff01;&#xff01;&#xff01;&#xff01;某XX网站逆向实例仅作为学习案例&#xff0c;禁止其他个人以及团体做谋利用途&#xff01;&#xff01;&#xff01; 案例--aHR0cHM6Ly9jcmVkaXQuaGxqLmdvdi5jbi94eWdzL3l6d2ZzeHF5bWQv 第一步&#xff1a;分析页面、请求…
阅读更多...
CTF 之Zhuanxv

CTF 之Zhuanxv

拿到题目进行目录遍历发现有一个/list文件 打开/list文件&#xff0c;发现是一个登录界面 尝试过爆破&#xff0c;毫无疑问不可能成功。 刷新页面&#xff0c;抓包&#xff0c;然后放一个包&#xff0c;发现又发了一个请求。 GET /loadimage?fileNameweb_login_bg.jpg HTTP/…
阅读更多...
1995-2021年各省分品种能源产量和消费量数据

1995-2021年各省分品种能源产量和消费量数据

1995-2021年各省分品种能源产量和消费量数据 1、时间&#xff1a;1995-2021年 2、来源&#xff1a;能源统计年鉴、各省年鉴 3、指标&#xff1a;能源消费总量、煤炭消费量、焦炭消费量、原油消费量、汽油消费量、煤油消费量、柴油消费量、燃料油消费量、天然气消费量、电力消…
阅读更多...
不开玩笑，你应该像「搬砖」一样写代码！斯坦福大学研究如是说

不开玩笑，你应该像「搬砖」一样写代码！斯坦福大学研究如是说

由于程序员不可避免要进行很多重复性的工作&#xff0c;并且工作强度很高&#xff0c;导致有一种自嘲的说法出现&#xff1a;程序员们自称自己每天都在搬砖&#xff08;实际上很多职场人都这么自嘲&#xff09;。我相信当我们说工作像「搬砖」的时候&#xff0c;只是在表达一种…
阅读更多...
非关系型数据库——三万字Redis数据库详解

非关系型数据库——三万字Redis数据库详解

目录 前言 一、Redis概述 1.主要特点 2.Redis优缺点 3.Redis为什么这么快 4.Redis那么快&#xff0c;为什么不用它做主数据库&#xff0c;只用它做缓存 5.线程模型 5.1单线程架构 5.2多线程IO处理&#xff08;Redis 6及以上&#xff09; 5.3线程模型的优化 6.作用 …
阅读更多...
回归预测 | Matlab实现WOA-GPR鲸鱼算法优化高斯过程回归多变量回归预测

回归预测 | Matlab实现WOA-GPR鲸鱼算法优化高斯过程回归多变量回归预测

回归预测 | Matlab实现WOA-GPR鲸鱼算法优化高斯过程回归多变量回归预测 目录 回归预测 | Matlab实现WOA-GPR鲸鱼算法优化高斯过程回归多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现WOA-GPR鲸鱼算法优化高斯过程回归多变量回归预测 1.Matlab实现…
阅读更多...
吹爆！遥感高光谱分类(Python)

吹爆！遥感高光谱分类(Python)

目录 一、数据集下载 二、安装包 三、数据处理 四、模型训练 五、模型推理 六、踩坑记录 一、数据集下载 Hyperspectral Remote Sensing Scenes - Grupo de Inteligencia Computacional (GIC) (ehu.eus) Installing SPy — Spectral Python 0.21 documentation 二、安装…
阅读更多...
算法打卡day36|动态规划篇04| 01背包理论基础、416. 分割等和子集

算法打卡day36|动态规划篇04| 01背包理论基础、416. 分割等和子集

目录 01背包理论基础 01背包问题描述 01背包解法 二维数组 一维数组 算法题 Leetcode 416. 分割等和子集 个人思路 解法 动态规划 01背包理论基础 不同的背包种类&#xff0c;虽然有那么多中南背包&#xff0c;但其中01背包和完全背包是重中之重&#xff1b; 01背包问…
阅读更多...
Python + Appium 自动化操作微信入门看这一篇就够了

Python + Appium 自动化操作微信入门看这一篇就够了

Appium 是一个开源的自动化测试工具&#xff0c;支持 Android、iOS 平台上的原生应用&#xff0c;支持 Java、Python、PHP 等多种语言。 Appium 封装了 Selenium&#xff0c;能够为用户提供所有常见的 JSON 格式的 Selenium 命令以及额外的移动设备相关的控制命令&#xff0c;…
阅读更多...
LABVIEW--正弦＋高斯噪声信号及滤波

LABVIEW--正弦＋高斯噪声信号及滤波

前面板信号 后面板 LABVIEW源程序链接&#xff1a;https://pan.baidu.com/s/11B-75i4fHZwWQyjxn9yCyQ?pwd7tfj 提取码&#xff1a;7tfj
阅读更多...
中文地址分词器源码阅读（jiedi）

中文地址分词器源码阅读（jiedi）

文章目录 structure.p文件pd.read_excelenumerate思维导图核心源码讲解jiedi.pytrain.py 总结 structure 点击左边的Structure按钮就如Structure界面。从Structure我们可以看出当前代码文件中有多少个全局变量、函数、类以及类中有多少个成员变量和成员函数。 其中V图标表示全…
阅读更多...
AI普及时代，【AI书童】助你提升自我竞争力

AI普及时代，【AI书童】助你提升自我竞争力

AI运营官招募令&#xff01;&#xff01;&#xff01; 【AI书童】运营官 未来智慧人工智能 2024-03-26 12:00 浙江 微信公众号&#xff1a;未来智慧人工智能 助力个人和企业在人工智能时代持续成功 随着ChatGPT、GPT-4和Sora等创新技术的推出&#xff0c;人工智能在多模态领…
阅读更多...
《梦幻西游》迎来史上最大翻车，老玩家们为何纷纷揭竿而起？

《梦幻西游》迎来史上最大翻车，老玩家们为何纷纷揭竿而起？

因一次调整&#xff0c;21岁的《梦幻西游》迎来了自己有史以来最大的一波节奏。 玩家在微博上炮轰官方&#xff0c;称&#xff1a;“游戏借着打击工作室牟利的称号&#xff0c;砍副本活动产出&#xff0c;然后自己口袋无限卖”&#xff0c;要求改善游戏现状。 从3月29日起&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023