SVG学习记录

已于 2024-05-23 18:47:11 修改
阅读量98 收藏
点赞数
分类专栏： 前端开发 文章标签： 学习
于 2020-05-13 17:58:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/106103275
版权

SVG有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>
path标签:
  • d: draw
  • M: move to
  • L: line to
    其中字母大小写表示含义不一样，小l、小m是相对定位(相对于上一个绘制点)，大L、大M是绝对定位（相对于屏幕左上角）。
  • q: 贝塞尔曲线
<path d="M150 0 L70 200 L225 200" />
g标签

包裹标签，定义公共属性

text标签，绘制文本

svg复用方式<g>, <defs>, <symbol>, <use>

在这里插入图片描述

一小时精讲SVG：链接

  1. SVG 图像入门教程
  2. 理解SVG viewport,viewBox,preserveAspectRatio缩放
  3. 秒懂<SVG/>里的viewbox
  4. SVG 线性渐变
  5. svg入门详解（理论篇）
  6. svg入门详解（实例篇）
  7. svg之path详解
. . . . .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
SVG学习笔记
u010928583的博客
10-23 321
svg学习笔记 1、svg基本操作API 1、创建图形 document.createElementNS(ns, tagName) 2、添加图形 element.appendChild(childElement) 3、 设置/获取属性 element.setAttribute(name, value) elememt.getAttribute(name) 注意：角度的顺时针方向为正方向。 2、颜色...
svg学习记录(二)
a253399414的博客
10-31 367
在上一篇文章中，已经介绍了简单的SVG的绘画，如何去引入SVG文件。接下来继续看看SVG中的定位系统与viewBox的知识点。 SVG定位 在SVG元素使用的是坐标系统（网络系统），和Canvas类似。以页面的左上角为起标点，以px为单位，x轴的正方形是向右边的，而y轴正方向是向下边。 看下面这个例子，绘画一个矩形，在rect标签中加入x和y属性，从左上角开始，向右边偏移50px的距离，再向下偏移60px的距离，开始绘画一个宽高各100的矩形。 <svg width="200" height="200
svg学习笔记
S_B_Girl的博客
12-28 391
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="b
svg 学习记录之 viewBox 属性
weixin_43191327的博客
08-22 2375
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
svg学习记录
qq_45226846的博客
12-18 94
1、svg 对比 canvas svg：本质是文本文件；不是基于像素的。所以无论放大多少倍都不会模糊。 canvas：本质是图片；基于像素。放大会模糊。 2、svg实现环形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
Svg 学习笔记
qq_32439381的博客
07-03 233
一、基础 1.矩形 rect 元素的 width 和 height 属性可定义矩形的高度和宽度style 属性用来定义 CSS 属性CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）CSS 的 stroke-width 属性定义矩形边框的宽度CSS 的 stroke 属性定义矩形边框的颜色 x 属性定义矩形的左侧位置（例如，x="0" 定义矩
SVG学习笔记二
OnlyRu丶小心心
07-14 343
1、使用CSS来为SVG图形添加样式 （1）使用属性来添加CSS样式 <circle stroke="#000000" fill="#00ff00" /> （2）使用style属性 <circle style="stroke: #000000; fill:#00ff00;" /> （3）使用内联样式表 <svg xmlns="http://www.w3.org/2000/svg"> <style type="t
svg学习笔记整理（超详细-非原创）
weixin_57182748的博客
06-29 283
代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小。代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小。这里就是不使用viewBox的原始大小，就是矩形图的原始大小，原始位置。
SVG学习记录目录
孰能无惑
08-09 96
SVG学习——1.引入SVG的方式 SVG学习——2.SVG基本图形 SVG学习——3.标签 SVG学习——4.成组绘图 SVG学习——5.实现圆与中心圆连接
SVG学习笔记（Scalable Vector Graphics）
08-07
学习 svg 需要掌握的知识:xml、html  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)  SVG 用来定义用于网络的基于矢量的图形  SVG 使用 XML 格式定义图形  SVG 图像在放大或改变尺寸的情况下其图形...
学习笔记-SVG + 甘特图demo
09-14
demo的代码
学习svg笔记
05-26
学习svg笔记
HTML5 SVG勤劳学习卡通人物.zip
10-14
非常实用好看的特效代码，可以完美运行，可以二次修改！
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
limengshi138392的博客
06-15 1106
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
学习记录：VS2019+OpenCV3.4.1实现SURF库函数的调用
weixin_42532989的博客
06-16 940
1.LNK2019 无法解析的外部符号 "public: static struct cv::Ptr 2.opencv_ffmpeg.dll、opencv_ffmpeg_64.dll下载失败无法无法生成opencv_xfeatures2d341d.lib 3.**由于找不到opencv_features2d341d.dll……**
新人学习笔记之（标识符和键盘录入）
2401_83311390的博客
06-20 55
3.使用方式：scanf("占位符",变量名);1.scanf，是scanner format的缩写，是C语言提供的一个函数。代码文件：全部小写，单词之间用下划线隔开，开头可以用数字。1.标识符是：代码中所有我们自己起的名字，比如变量名、函数名等。2.作用：获取用户在键盘上输入的数据，并赋值给变量。由数字、字母、下划线(_)组成。占位符之间的间隔符号建议用空格。占位符和后面的变量要一一对应。用英文单词，见名知意。2.命名规则---硬性要求。3.命名规则---软性要求。
昇思25天学习打卡营第2天|张量Tensor
最新发布
2301_77286822的博客
06-20 456
张量是一种特殊的数据结构，与数组和矩阵非常相似。张量（）是MindSpore网络运算中的基本数据结构（也是所有深度学习模型的基础数据结构），下面将主要介绍张量和稀疏张量的属性及用法。张量（Tensor）是一个可用来表示在一些矢量、标量和其他张量之间的线性关系的多线性函数，这些线性关系的基本例子有内积、外积、线性映射以及笛卡儿积。其坐标在 𝑛 维空间内，有  N的R次方个分量的一种量，其中每个分量都是坐标的函数，而在坐标变换时，这些分量也依照某些规则作线性变换。
嵌入式技术学习——c51——串口
m0_71703182的博客
06-17 693
在总线上接受数据和发送数据，靠定时器计数，T1的溢出率经过二分频或16分频控制收放的速率，通过SBUF写入发送数据。将数据放在SBUF，单片机自动读写数据，发送之后会申请TI这个发送中断，接收数据会生成RI接受中断。串口是一个 通讯接口。成本低，容易使用，通信线路简单，可实现两个设备的相互通信。单片机的串口可以实现单片机于单片机，单片机与电脑，单片机与其他模块相互通信。RS485电平：两线压差+2~+6V表示1，-2~-6V表示0（差分信号）RS232电平：-3~-15V表示1，+3~+15V表示0。
svg polyline
12-23
以下是两个关于SVG polyline的例子： 1. 创建一个只包含直线的形状： ```xml <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值