SVG基本使用
创始人
2025-05-30 13:56:59
0次
MDN文档
概述
1、svg提供的是矢量图，缩放不会失真或降低质量
2、css可以利用style属性插入到元素的行间
3、svg可以嵌套svg
可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐标系统。
形状
1、直线
2、折线
3、矩形
4、圆
5、椭圆
6、多边形
与折线类似，但是折线不会形成闭合
矩形也是一种矩形，所以也可以用多边形创建矩形
7、路径
最强大的一个，可以创建线条，曲线，弧形等
path设置很少的点就能创建平滑流畅的线条， polyline必须设置大量的点，且放大过后点的离散更明显
1）画线
2）画矩形
3）贝塞尔曲线
4）弧形
填充
1、基本填充和边框
fill 设置填充颜色
fill-opacity 设置填充色的不透明度
stroke 设置描边颜色
stroke-opacity 设置描边的不透明度
stroke-width 设置描边尺寸
stroke-linecap 设置描边方式，如round圆角、butt直角、square直角，但会超出实际范围
stroke-linejoin 两条线之间的描边方式，如miter尖角、round圆角、bebel斜切例如：设置一个黑色圆角不透明度为0.8的直线
2、渐变填充
1） 线性渐变
2）经向渐变
3、图案填充
pattern内部可以包含任何形状
4、文字填充
操作
1、变形
1）基本变形
和css的transform一样
2）复杂变形
matrix(a,b,c,d,e,f) 需要用到矩阵 详情
如matrix(2,0,0,2,0,0) 是放大两倍
2、剪切
3、遮罩
可以搭配渐变使用
其他元素
1、容器元素g
方便统一设置填充、描边、变换等属性
2、克隆元素use
3、image
相关内容
热门资讯
linux入门---制作进度条
了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统（六）：学...
8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤： 在Student.cpp的...
JAVA多线程知识整理
Java多线程基础 线程的创建和启动 继承Thread类来创建并启动 自定义Thread类的子类&#...
【洛谷 P1090】[NOIP...
[NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G ...
国民技术LPUART介绍
低功耗通用异步接收器（LPUART） 简介 低功耗通用异步收发器...
城乡供水一体化平台-助力乡村振...
城乡供水一体化管理系统建设方案 城乡供水一体化管理系统是运用云计算、大数据等信息化手段...
程序的循环结构和random库...
第三个参数就是步长 引入文件时记得指明字符格式，否则读入不了 ...
中国版ChatGPT在哪些方面...
目录 一、中国巨大的市场需求 二、中国企业加速创新 三、中国的人工智能发展 四、企业愿景的推进 五、...
报名开启 | 共赴一场 Flu...
2023 年 1 月 25 日，Flutter Forward 大会在肯尼亚首都内罗毕...
汇编00-MASM 和 Vis...
Qt源码解析 索引 汇编逆向--- MASM 和 Visual Studio入门 前提知识ÿ...
【简陋Web应用3】实现人脸比...
文章目录🍉 前情提要🌷 效果演示🥝 实现过程1. u...
前缀和与对数器与二分法
1. 前缀和 假设有一个数组，我们想大量频繁的去访问L到R这个区间的和，...
windows安装JDK步骤
一、 下载JDK安装包 下载地址：https://www.oracle.com/jav...
分治法实现合并排序(归并排序)...
🎊【数据结构与算法】专题正在持续更新中，各种数据结构的创建原理与运用✨...
在linux上安装配置node...
目录前言1，关于nodejs2，配置环境变量3，总结 前言...
Linux学习之端口、网络协议...
端口：设备与外界通讯交流的出口 网络协议： 网络协议是指计算机通信网...
Linux内核进程管理并发同步...
并发同步并发 是指在某一时间段内能够处理多个任务的能力，而 并行 是指同一时间能够处理...
opencv学习-HOG LO...
目录1. HOG(Histogram of Oriented Gradients,方向梯度直方图)1...
EEG微状态的功能意义
导读大脑的瞬时全局功能状态反映在其电场结构上。聚类分析方法一致地提取了四种头表面脑电场结构ÿ...
【Unity 手写PBR】Bu...
写在前面 前期积累： GAMES101作业7提高-实现微表面模型你需要了解的知识 【技...