SVG基本使用
创始人
2025-05-30 15:06:06

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、文字填充


SVG你好沿着路径对齐

操作

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

上一篇：今日热点“宝马娱乐开挂辅助神器”其实是有挂!

下一篇：实测讲解“微信链接牛牛真的有挂吗”揭秘曝光猫腻!

相关内容

热门资讯

8个月暴涨10倍，最火AI巨头... 光模块/CPO，又创历史新高了。再创新高，“易中天”大爆发今年以来，AI板块缔造了太多大牛股，而AI...
“祥源系”掌舵人俞发祥被刑拘！... 富豪沦为阶下囚，谁该为百亿兑付“埋单”？作者 | 于婞编辑丨高岩来源 | 野马财经一场涉及上百亿资金...
【视频】超级行动派：如何保卫财... 文 ｜ 清和 智本社社长社长，这种经济环境，该怎么降低风险？怎么配置资产？这几年，经常有社友问我这两...
持续亏损、第三次增资，深蓝汽车... 从成立至今，深蓝汽车经历了销量快速增长的喜悦，也面临着持续亏损的困境，其发展历程折射出传统车企向新能...
“00后”体育生用AI做外贸，... 当下入局做外贸，要想赚到第一桶金，靠的是一个无所不能的“超级个体”，还是分工明确的“系统战队”？两年...