重生之我是SVG(1)-入门

news2025/1/15 13:03:07

概述

引用一句来自MDN的一句话：

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，您可以找到每个 SVG 元素的参考文档。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS 也可以使用 SVG 文件。

.logo {
  background: url(icon.svg);
}

SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。

<img src="data:image/svg+xml;base64,[data]">

基本使用

更全面的标签集在MDN中会有展示。这里展示一个完整图片会用的基本组成标签。

<svg>标签

SVG 代码都放在顶层标签<svg>之中。下面是一个例子。

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<svg>的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。

如果只想展示 SVG 图像的一部分，就要指定viewBox属性。

<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。

注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

图形标签

<svg width="400" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

在这里插入图片描述

一些名牛的官网动画基本上是由这些东西组成的。更多的是创意以及一些更高级的变形。后面会逐一介绍，主要我觉得是要扎好马步！

矩形 <rect>

矩形基本上由6个元素确定整体样子。分别是

  • x -> 矩形左上角x位置, 默认值为 0
  • y -> 矩形左上角y位置, 默认值为 0
  • width -> 矩形的宽度, 不能为负值否则报错, 0 值不绘制
  • height -> 矩形的高度, 不能为负值否则报错, 0 值不绘制
  • rx -> 圆角x方向半径, 不能为负值否则报错
  • ry -> 圆角y方向半径, 不能为负值否则报错

举个小的例子来解释一下rx与ry。

<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

在这里插入图片描述

圆形<circle>

正如你猜到的，circle元素会在屏幕上绘制一个圆形。它只有 3 个属性用来设置圆形。

<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  • r -> 圆的半径
  • cx -> 圆心的 x 位置
  • cy -> 圆心的 y 位置

椭圆<ellipse>

ellipse是circle元素更通用的形式，你可以分别缩放圆的 x 半径和 y 半径（通常数学家称之为长轴半径和短轴半径）。

<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
  • ry -> 椭圆的 y 半径
  • rx ->椭圆的 x 半径
  • cx -> 圆心的 x 位置
  • cy -> 圆心的 y 位置

线条<line>

绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。

<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  • x1 -> 起点的 x 位置
  • y1 -> 起点的 y 位置
  • x2 -> 终点的 x 位置
  • y2 -> 终点的 y 位置

折线<polyline>

是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中：

<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
        stroke="orange" fill="transparent" stroke-width="5"/>
  • points -> 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。

多边形<polygon>

polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。

<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="transparent" stroke-width="5"/>
  • points -> 点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置 (2,2) 连接到位置 (0,0)。

路径<path>

path可能是 SVG 中最常见的形状。你可以用 path 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2 次曲线等曲线。后面会有一章专门介绍这个。

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
  • d -> 一个点集数列以及其它关于如何绘制路径的信息。具体字母的含义在后面会介绍，因为太多啦~

上面的demo全都在一个demo的github里面。

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

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

相关文章

华三OSPF多区域互访实验

华三OSPF多区域互访实验

OSPF 实验 实验拓扑 实验需求 按照图示配置 IP 地址按照图示分区域配置 OSPF &#xff0c;实现全网互通为了路由结构稳定&#xff0c;要求路由器使用环回口作为 Router-id&#xff0c;ABR 的环回口宣告进骨干区域 实验解法 1.配置 IP 地址部分 2.按照图示分区域配置 OS…
阅读更多...
Zeppelin-0.10.0的安装

Zeppelin-0.10.0的安装

目录 1.解压到指定目录 2.修改文件名 3.拷贝配置文件 4.修改IP和端口号&#xff0c;也可以改为8090等端口号 5.修改zeppelin-env.sh文件 6.复制hive-site.xml文件到当前目录下 7.切换目录 8.拷贝hadoop和hive的各种jar包到/opt/soft/zeppelin/interpreter/jdbc目录下 …
阅读更多...
SDYY大学普通话考试报名系统说明文档

SDYY大学普通话考试报名系统说明文档

系列文章目录 健康云平台开发说明文档SD申报系统迭代说明文档漏刻有时物联网传感器API接口对接说明文档Echarts数据分析系统Data Analysis Platform使用说明文档漏刻有时云守护数据可视化v2.0迭代升级说明文档百度地图POI多信息点标注开发说明文档漏刻有时云守护数据可视化画质…
阅读更多...
Docker之路（7.DockerFile文件编写、DockerFile 指令解释、CMD与ENTRYPOINT的区别）

Docker之路（7.DockerFile文件编写、DockerFile 指令解释、CMD与ENTRYPOINT的区别）

1.DockerFile介绍 dockerfile 是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 编写一个dockerfile文件docker build构建成为一个镜像docker run 运行镜像docker push发布镜像&#xff08;DockerHub、阿里云镜像仓库&#xff09; 2.Dock…
阅读更多...
如何使用ADFSRelay分析和研究针对ADFS的NTLM中继攻击

如何使用ADFSRelay分析和研究针对ADFS的NTLM中继攻击

关于ADFSRelay ADFSRelay是一款功能强大的概念验证工具&#xff0c;可以帮助广大研究人员分析和研究针对ADFS的NTLM中继攻击。 ADFSRelay这款工具由NTLMParse和ADFSRelay这两个实用程序组成。其中&#xff0c;NTLMParse用于解码base64编码的NTLM消息&#xff0c;并打印有关消…
阅读更多...
SAP 在建工程转固定资产

SAP 在建工程转固定资产

由固定资产归口采购部门或业务部门提交购置固定资产/在建工程的申请&#xff0c;经审批后&#xff0c;若是需要安装调试&#xff0c;则由财务部固定资产会计建立内部订单收集成本&#xff0c;月末结转在建工程。项目完工后&#xff0c;相关部门&#xff08;公司装备部、分公司装…
阅读更多...
Python虚拟环境迁移

Python虚拟环境迁移

使用python开发脚本使用的时候难免会遇到需要更换电脑来运行的问题&#xff0c;但是python不同版本的兼容性较差&#xff0c;在其他电脑使原python脚本运行时经常会发生一些问题&#xff0c;因此就需要python虚拟环境的迁移了。但是&#xff0c;直接将虚拟环境复制到另一台电脑…
阅读更多...
Git学习（1）pro git阅读尚硅谷视频

Git学习（1）pro git阅读尚硅谷视频

目录 目录&#xff1a; 1. 起步 2. Git 基础 3. Git 分支 4. 服务器上的 Git 5. 分布式 Git 第一章 1.3 Git是什么 1.6运行git前的配置 该开源图书网站 Git - Book (git-scm.com) 目录&#xff1a; 1. 起步 1.1 关于版本控制1.2 Git 简史1.3 Git 是什么&#xff1f;1…
阅读更多...
《图机器学习》-GNN Augmentation and Training

《图机器学习》-GNN Augmentation and Training

GNN Augmentation and Training一、Graph Augmentation for GNNs1、Feature Augmentation2、Structure augmentation3、Node Neighborhood Sampling一、Graph Augmentation for GNNs 之前的假设&#xff1a; Raw input graph computational graph&#xff0c;即原始图等于计算…
阅读更多...
产品需求文档需要注意10件事

产品需求文档需要注意10件事

01什么是完美的产品需求文档&#xff08;PRD&#xff09;&#xff1f;就像产品经理一样&#xff0c;产品需求文档需要同时有效地执行许多不同的角色。该文档将由设计师&#xff0c;营销人员和工程团队使用&#xff0c;并且需要传达他们所需的所有必要信息。参考上面的漫画&…
阅读更多...
html,

html,

目录1. html新建1.1 html基本结构1.2 html细节2. 标签2.1 font标签2.2 字符实体2.3 标题标签2.4 超链接标签2.5 列表标签2.6 图片标签2.7 表格标签2.8 表单标签2.8.1基本使用2.8.2表单综合练习2.8.3表单格式化2.8.4表单使用细节2.8.5get请求2.8.6post请求2.9 其它标签2.9.1div标…
阅读更多...
【JavaScript】第一章JavaScript入门

【JavaScript】第一章JavaScript入门

第一章 JavaScript入门JavaScript介绍JavaScript的起源JavaScript的应用JavaScript的特点JavaScript是脚本语言支持面向对象编程&#xff0c;面向过程编程/函数式编程支持跨平台执行JavaScript和ECMAScript的关系开发工具编辑器sublime textVisual Studio CodewebstormDreamwea…
阅读更多...
安装VMWare虚拟机之后，发现网络贼卡，打开网页很慢

安装VMWare虚拟机之后，发现网络贼卡，打开网页很慢

事情描述&#xff1a; 最近忙一个项目&#xff0c;需要到虚拟机中部署环境&#xff0c;安装完之后&#xff0c;就开整自己的项目了。 可以过几天&#xff0c;发现本地网络贼卡&#xff0c;打开各网页慢的一批&#xff0c;一开始还以为是路由器的问题&#xff0c;反复折腾之后排…
阅读更多...
HBuilder X启动微信开发工具报错的问题

HBuilder X启动微信开发工具报错的问题

今天通过HBuilder X启动微信开发工具&#xff0c;报了如下的错&#xff1a; [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings…
阅读更多...
Android Studio相关记录

Android Studio相关记录

目录Android Studio 便捷插件Android LogcatJava文件的类头模板Android Studio 使用遇到的问题解决方案org.jetbrains.annotations.NullableBuild 控制台编译输出中文乱码Terminal 使用 git 命令窗口git 命令窗口中文乱码Android Studio 便捷插件 Android Logcat 配置路径 Fi…
阅读更多...
【VUE】六 路由和传值

【VUE】六 路由和传值

目录 一、 路由和传值 二、案例 三、案例存在无法刷新问题 一、 路由和传值 当某个组件可以根据某些参数值的不同&#xff0c;展示不同效果时&#xff0c;需要用到动态路由。 例如&#xff1a;访问网站看到课程列表&#xff0c;点击某个课程&#xff0c;就可以跳转到课程详…
阅读更多...
【c#】学习DATATABLE排序

【c#】学习DATATABLE排序

c#实现Datatable排序Datatable排序结果图代码展示总结Datatable排序 结果图 原数据 倒序 去重 筛选行 代码展示 1、使用datatable视图对table进行排序 //倒序排序 dt.DefaultView.Sort “CreateTime desc”; dt dt.DefaultView.ToTable(); 如果想升序排序&#xff0c…
阅读更多...
kafka入个门

kafka入个门

名词 topic 表 partation 水平扩展 leader 主 follow备 produce生产 offset偏移量 消息队列的流派 什么是 MQ Message Queue&#xff08;MQ&#xff09;&#xff0c;消息队列中间件。很多人都说&#xff1a;MQ 通过将消息的发送和接收分离来实现应用程序的异步和解偶&#xf…
阅读更多...
DASCTF X GFCTF 2022十月挑战赛 Web

DASCTF X GFCTF 2022十月挑战赛 Web

from DASCTF X GFCTF 2022十月挑战赛 Web EasyPOP 就简单的php反序列化 源码 <?php highlight_file(__FILE__); error_reporting(0);class fine {private $cmd;private $content;public function __construct($cmd, $content){$this->cmd $cmd;$this->content …
阅读更多...
Leetcode22. 括号生成

Leetcode22. 括号生成

一、题目描述&#xff1a; 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023