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

1 rect 矩形

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

（1）基本语法

<rect
  x="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）基本语法

<circle
  cx="圆心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）基本语法

<ellipse
  cx="圆心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）基本语法

<line
  x1="起点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）基本语法

<polygon
  points="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）基本语法

<path
  d="绘制命令+参数"
  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”）。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

达梦数据库记录

达梦数据库记录

1.计算日期差 SELECT DATEDIFF(day,sysdate(), 2024-06-01) 2.出现HJ_BUF_GLOBAL_SIZE设置不当造成应用报错的问题&#xff0c;详细信息如下&#xff1a; dm.jdbc.driver.DMException: 超出全局hash join空间,适当增加HJ_BUF_GLOBAL_SIZEat dm.jdbc.driver.DBError.throwExce…
阅读更多...
Java设计模式：桥接模式实现灵活组合，超越单一继承的设计之道（十）

Java设计模式：桥接模式实现灵活组合，超越单一继承的设计之道（十）

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、引言二、什么是桥接设计模式三、桥接设计模式的核心思想四、桥接设计模式的角色五、桥接设计模式的工作流程和实现实现方…
阅读更多...
如何设置win10系统不更新,win10怎么设置系统不更新系统

如何设置win10系统不更新,win10怎么设置系统不更新系统

Win10频繁地更新让很多用户感到困扰，虽然我们都知道，更新系统有利于提高系统的安全性，同时还能获得功能更新以及一些bug修复，但是过于频繁的更新会让人感到疲惫，也有不少用户对此举表示反感。一般情况下，win10系统是默认自动更新的，如何阻止系统自动更新呢?下面，小编跟…
阅读更多...
文件夹类型变无？数据恢复有高招！

文件夹类型变无？数据恢复有高招！

在日常使用电脑的过程中&#xff0c;我们有时会遇到一种奇怪的现象&#xff1a;原本整齐有序的文件夹突然变成了无类型的状态&#xff0c;即文件夹类型变无。这些文件夹失去了原有的图标和属性&#xff0c;变成了系统无法识别的空白图标&#xff0c;甚至无法打开。这种情况下&a…
阅读更多...
甘特图/横道图制作技巧 - 任务组

甘特图/横道图制作技巧 - 任务组

在甘特图中通过合理的任务分组可以让项目更加清晰&#xff0c;修改也更方便。 列如下面的甘特图一眼不太容易看清楚整体的进度。或者需要把所有的任务整体的延迟或者提前只能这样一个一个的任务调整&#xff0c;就比较麻烦。 通过给任务分组&#xff0c;看这上面整体的进度就…
阅读更多...
Redis安装及基本类型详解

Redis安装及基本类型详解

目录 一、Redis概念 二、Redis的应用场景 三、Redis的特点 四、redis访问数据为什么快&#xff1f; 五、Ubuntu下安装redis 五、全局命令(针对任意类型value都可使用) 1、keys &#xff08;1&#xff09;keys * &#xff08;2&#xff09;keys pattern 2、exists 3、…
阅读更多...
git Failed to connect to 你的网址 port 8282: Timed out

git Failed to connect to 你的网址 port 8282: Timed out

git Failed to connect to 你的网址 port 8282: Timed out 出现这个问题的原因是&#xff1a;原来的仓库换了网址&#xff0c;原版网址不可用了。 解决方法如下&#xff1a; 方法一&#xff1a;查看git用户配置是否有如下配置 http.proxyhttp://xxx https.proxyhttp://xxx如果…
阅读更多...
《梦幻西游》迎来史上最大翻车，老玩家们为何纷纷揭竿而起？

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

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

uniapp 密码框的眼睛

效果展示&#xff1a; uniapp input 官网链接&#xff1a;链接 按照官方文档&#xff0c;uni-icon出不来。 通过自己的方法解决了&#xff0c;解决方案如下&#xff1a; 代码&#xff1a; <uni-forms-item name"password"><inputclass"uni-input&quo…
阅读更多...
background背景图参数边渐变CSS中创建背景图像的渐变效果

background背景图参数边渐变CSS中创建背景图像的渐变效果

效果:可以看到灰色边边很难受,希望和背景融为一体 原理: 可以使用线性渐变&#xff08;linear-gradient&#xff09;或径向渐变&#xff08;radial-gradient&#xff09;。以下是一个使用线性渐变作为背景图像 代码: background: linear-gradient(to top, rgba(255,255,255,0)…
阅读更多...
【Linux】指令

【Linux】指令

1. 简单指令 whoami 显示当前登入账号名 ls /home 现在有的用户名 adduser 用户名 新加用户&#xff08;必须在root目录下&#xff09; passwd 用户名 给这个用户设置密码 userdel -r 用户名 删除这个用户 pwd 显示当前所处路径 stat 文件名 / 文件夹名 显示文件状…
阅读更多...
学习大数据之JDBC(使用JAVA语句进行SQL操作)（3）

学习大数据之JDBC(使用JAVA语句进行SQL操作)（3）

文章目录 DBUtils工具包准备工作DBUtils的介绍QueryRunner空参的QueryRunner的介绍以及使用有参QueryRunner的介绍以及使用 ResultSetHandler结果集BeanHandler<T>BeanListHandler<T>ScalarHanderColumnListHander 事务事务事务_转账分析图实现转账&#xff08;不加…
阅读更多...
CTF之GET和POST

CTF之GET和POST

学过php都知道就一个简单传参&#xff0c;构造payload:?whatflag得到 flag{3121064b1e9e27280f9f709144222429} 下面是POST那题 使用firefox浏览器的插件Hackbar勾选POST传入whatflag flag{828a91acc006990d74b0cb0c2f62b8d8}
阅读更多...
【网站项目】鲜花销售微信小程序

【网站项目】鲜花销售微信小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
Dubbo 服务发现

Dubbo 服务发现

Dubbo 服务发现 1、什么是服务发现 **服务发现&#xff08;Service discovery&#xff09;**是自动检测一个计算机网络内的设备及其提供的服务。 2、Dubbo 与 服务发现 Dubbo 提供的是一种 Client-Based 的服务发现机制&#xff0c;依赖第三方注册中心组件来协调服务发现过…
阅读更多...
【算法】两数之和（暴力求解+哈希表）

【算法】两数之和（暴力求解+哈希表）

本题来源---《两数之和》。 题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里…
阅读更多...
前端零基础学习web3开发

前端零基础学习web3开发

目录 1 钱包 2 发起交易 3 出块 4 块高 5 矿工 6 Gas费 这一节&#xff0c;我们不说让人神往的比特币&#xff0c;不说自己会不会利用这个虚拟的货币来发财&#xff0c;也不说那些模模糊糊的知识&#xff0c;什么去中心化啦&#xff0c;什么奇妙的加密啦&#xff0c;我们…
阅读更多...
云骑士数据恢复怎么授权别的电脑

云骑士数据恢复怎么授权别的电脑

随着科技的不断发展&#xff0c;数据恢复已经成为了我们生活中不可或缺的一部分。云骑士数据恢复作为一款功能强大的数据恢复软件&#xff0c;受到了广泛的欢迎。但是&#xff0c;有时候我们需要将云骑士数据恢复授权给其他电脑使用&#xff0c;这就需要我们了解相关的操作步骤…
阅读更多...
【XCPC笔记】2023 (ICPC) Jiangxi Provincial Contest——ABCHIJKL 做题记录

【XCPC笔记】2023 (ICPC) Jiangxi Provincial Contest——ABCHIJKL 做题记录

赛后gym练习及补题&#xff0c;gym链接&#xff1a;2023 (ICPC) Jiangxi Provincial Contest – Official Contest 补题顺序 L [Zhang Fei Threading Needles - Thick with Fine](https://codeforces.com/gym/104385/problem/L)题面解读参考代码 A [Drill Wood to Make Fire](h…
阅读更多...
数字电路基础（Digital Circuit Basis ）

数字电路基础（Digital Circuit Basis ）

目录 一、什么是数字电路&#xff1f; &#xff08;Digital Circuit &#xff09; 1.概念 2.分类 3.优点 4.数电与模电的区别 二、数制 (十进制&#xff1a;Decimal) 1.概述 2.进位制 3.基数 4.位权 5.二进制的算术运算 三、编码 (二进制&#xff1a;Binary ) 1.什…
阅读更多...
最新文章

Copyright @ 2022~2023