SVG图标可能大家都有用过,一提起SVG,第一个印象就是可以无损缩放图标,而且文件体积小,是做小图标的绝佳实现方式。遂总结关于SVG的使用方式以及一些思考…
一、SVG的使用
SVG的使用并不难,甚至一些svg图标可以通过iconfont平台直接下载,这里主要讲讲关于SVG中的各个属性以及用法
在一个HTML文件中,svg就是其标签之一,在网页中其基本用法如下:
<!DOCTYPE html> <html> <body> <svg> <circle cx="100" cy="50" r="50" fill="red" /> </svg> </body> </html>
为了兼容性可以如下方式引入svg
<embed src="circle1.svg" type="image/svg+xml" /> <object data="circle1.svg" type="image/svg+xml"></object> <iframe src="circle1.svg"></iframe>
而一个svg格式的文件如下:
<?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" width="300" height="150"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
svg好比一个画板,学习过图形学的同学应该很容易理解,类似图形学中基本图形、画线等操作接下来一起看看吧!
1.1 矩形 react
react标签的属性:
- x:矩形左上角横坐标
- y:矩形左上角纵坐标
- width:矩形宽度
- height: 矩形高度
- style:行内样式,如下属性均可放到react标签中
- fill:封闭区域填充色,支持rgb、颜色名和十六进制
- fill-opacity:填充色透明度
- fill-rule:颜色填充规则,
nonzero | evenodd | inherit
- stroke:画笔颜色
- stroke-width:画笔粗细
- stroke-opacity:画笔颜色透明度
- stroke-linecap:画线端点样式,round(平滑)
- stroke-linejoin:两线交点处样式,round(平滑)
- stroke-dasharray: 虚线
1.2 圆 circle
circle标签的属性
- cx:圆心横坐标
- cy:圆心纵坐标
- r:圆半径
1.3 椭圆 ellipse
ellipse与圆类似,不同之处在于可设置横纵半径:
- cx:椭圆中心横坐标
- cy:椭圆中心纵坐标
- rx: 椭圆横向半径
- ry:椭圆纵向半径
1.4 直线 line
line标签用于画线,两点确定一条直线:
- x1:起点横坐标
- y1:起点纵坐标
- x2:终点横坐标
- y2:终点纵坐标
1.5 多边形 polygon
polygon标签用于创建不少于三条边的封闭图形
- points: 顺序描述每个节点坐标
<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
1.6 曲线 polyline
polyline表现用于直线段链接的曲线,不封闭:
- points:顺序描述每个节点坐标
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg>
1.7 路径 path
path标签其功能与polyline类似,但其更具体,其属性如下(属性若小写则其后数值代表相对位移):
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
<svg> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
1.8 文本 text
text标签支持文本(字符串),类似span标签,其属性可以通过style或行内预置属性调整样式,这里不认为其预置样式有什么相较于css的优点,因此其主要属性如下:
- x:横坐标
- y:纵坐标
<svg height="100" width="90"> <text x="0" y="20" fill="red">I love SVG</text> </svg>
文本中还可嵌入tspan标签,该标签类似html的p标签,与text标签类似可设置x、y属性
<svg> <text x="10" y="20" style="fill:red;">Several lines: <tspan x="10" y="45">First line</tspan> <tspan x="10" y="70">Second line</tspan> </text> </svg>
支持超链接
<!DOCTYPE html> <html> <body> <svg> <a xlink:href="https://blog.dyboy.cn" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a> </svg> </body> </html>
圆弧形的文字排版
<svg width="500" height="300"> <defs> <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:red;"> <textPath xlink:href="#path1">I love SVG I love DYBOY</textPath> </text> </svg>
1.9 滤镜
SVG的滤镜标签如下,用来增加对SVG图形的特殊效果:
- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤
例如模糊效果:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg>
二、SVG制作在线工具
在线体验地址:https://c.runoob.com/more/svgeditor/
三、总结
通过对SVG的简单使用,SVG就好比一张画布,svg标签内部包裹的这些标签就是xml描述性代码,浏览器根据这些描述性代码基于计算机图形学绘制出各种图形、效果。canvas与svg相似,另外svg的大规模使用可以参考Google的在线PPT,Google的工程师真的是把每个效果都用svg定义实现了,six!
Reference:
How to Hand Code SVG - Kezz Bracey
SVG element reference - MDN
版权声明:《 值得一学的SVG 》为DYBOY原创文章,转载请注明出处!
最后编辑:2020-12-14 14:12:11
2020-12-15 19:53
推荐阅读文章;https://juejin.cn/post/6892208975127773197
2021-02-24 16:05