svg是矢量图是用一种可描述的二维图形的XML语言。svg的优势矢量图支持放大收缩不会影响分辨率基于xml语言可以支持文本的编辑与修改允许添加交互式元素绑定动画链接以及事件处理器允许通过css和js来实现svg的动态实现可嵌入性支持直接嵌入到html里面和web的兼容性比较好。基本语法svg/svg标签包裹里面是svg图形比如circle表示圆形rect表示矩形width宽度height高度xmlnssvg指定的规定的XML命名空间svgwidth200height200xmlnshttp://www.w3.org/2000/svgcirclecx100cy100r80fillblue//svg基本图形简述圆形cx,cy圆心坐标r半径矩形使用 rect 元素绘制矩形可以指定矩形的位置、大小、圆角等属性。椭圆:指定椭圆的中心坐标和长短轴的半径fill填充颜色ellipse cx100 cy100 rx80 ry50 fillgreen /直线终点起点位置stroke的边框颜色stroke-width宽度line x150 y150 x2150 y2150 strokeblack stroke-width2 /多边形指定多个顶点的位置polygon points100,50 150,150 50,150 fillorange /折线同多边形就是填充颜色为none就可以polyline points100,50 150,150 50,150 fillnone strokeblue stroke-width2 /路径使用 path 元素绘制路径可以通过指定一系列的路径命令来绘制各种形状。path dM10 10 L90 10 L90 90 Z fillnone strokeblack stroke-width2 /渐变和填充使用 linearGradient 或 radialGradient 定义渐变。使用 fill 和 stroke 属性指定填充和描边样式。文本和字体使用 text 元素插入文本。使用 font-family、font-size 等属性控制文本样式。嵌套和分组g idgroup1!-- g标签定义一个分组 id是分组的唯一标识--!-- 分组内的图形元素 --rect x10 y10 width50 height50 /circle cx100 cy100 r30 //g以矩形为例rectxx-coordinate !-- 矩形左上角的 x 坐标 --yy-coordinate!-- 矩形左上角的 y 坐标 --widthwidth-value!-- 矩形的宽度 --heightheight-value!-- 矩形的高度 --rxrx-value!-- 矩形的圆角半径水平方向 --ryry-value!-- 矩形的圆角半径垂直方向 --fillfill-color!-- 矩形的填充颜色 --strokestroke-color!-- 矩形的描边颜色 --stroke-widthwidth-value!-- 矩形的描边宽度 --stroke-opacity0.9/style 属性用来定义 CSS 属性svg xmlnshttp://www.w3.org/2000/svg version1.1rect width300 height100stylefill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)//svg属性strokesvg中的stroke属性用于定义图片元素的描边它可以应用与任何具有轮廓的图形元素。stroke//描述描边颜色stroke-width//描述描边宽度stroke-linecap//定义不同类型的开放路径的终结butt/rounde/squarestroke-dasharray//描边的样式就是第一个值为宽度第二个值为间距svg xmlnshttp://www.w3.org/2000/svg version1.1g fillnone strokeblack stroke-width4path stroke-dasharray5,5 dM5 20 l215 0 /path stroke-dasharray10,10 dM5 40 l215 0 /path stroke-dasharray20,10,5,5,5,10 dM5 60 l215 0 //g/svgstroke-opacity//描边透明度filter滤镜svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义滤镜 --filter idfilter_id!-- 滤镜效果 --/filter!-- 应用滤镜的目标元素 --rect x50 y50 width100 height80 filterurl(#filter_id) //svgfeGaussianBlurSVG 中的模糊效果可以通过 feGaussianBlur 元素实现该元素使用高斯模糊算法来模糊图像。两个参数stdDeviation:指定高斯模糊的标准差可以有两个值表示水平和垂直方向的标准差一个值说明水平喝垂直方向一致。标准差越大模糊程度越高。in指定输入图像通常为SourceGraphic表示应用滤镜效果的目标元素本身。svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义模糊滤镜 --filter idblur_filterfeGaussianBlur inSourceGraphic stdDeviation5 //filter!-- 应用模糊滤镜的矩形 --rect x50 y50 width100 height80 fillred filterurl(#blur_filter) //svgfeOffset 用于图像上的偏移量它的作用是将输入图像的每个像素沿着指定的水平和垂直方向移动一定的距离然后将结果图像作为滤镜效果的输出。dx 属性定义了阴影在水平方向上的偏移量。dy 属性定义了阴影在垂直方向上的偏移量。svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义偏移滤镜 --filter idoffset_filterfeOffset dx5 dy5 //filter!-- 应用偏移滤镜的矩形 --rect x50 y50 width100 height80 fillred filterurl(#offset_filter) //svgfeDropShadow实现阴影效果svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义阴影滤镜 --filter idshadow_filterfeDropShadow dx5 dy5 stdDeviation5 flood-colorgray flood-opacity0.5 //filter!-- 应用阴影滤镜的矩形 --rect x50 y50 width100 height80 fillred filterurl(#shadow_filter) //svglinearGradient线性渐变id定义线性渐变的唯一标识符用于在svg图像中引用该渐变x1,y1定义渐变的起始点坐标x2,y2定义渐变的结束点坐标stop 元素用于指定渐变中的颜色和颜色的位置。svg xmlnshttps://www.w3.org/2000/svg version1.1defslinearGradient idgrad1 x10% y10% x2100% y20%stop offset0% stylestop-color:rgb(150,185,0);stop-opacity:1 /stop offset100% stylestop-color:rgb(255,0,0);stop-opacity:1 //linearGradient/defsellipse cx200 cy70 rx85 ry55 fillurl(#grad1) //svgradialGradient放射性的渐变svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义径向渐变 --radialGradient idgradient cx50% cy50% r50% fx50% fy50%stop offset0% stop-colorred /stop offset100% stop-colorblue //radialGradient!-- 应用径向渐变的圆形 --circle cx100 cy100 r80 fillurl(#gradient) //svg参考文章https://www.runoob.com/svg/svg-examples.html
svg学习
svg是矢量图是用一种可描述的二维图形的XML语言。svg的优势矢量图支持放大收缩不会影响分辨率基于xml语言可以支持文本的编辑与修改允许添加交互式元素绑定动画链接以及事件处理器允许通过css和js来实现svg的动态实现可嵌入性支持直接嵌入到html里面和web的兼容性比较好。基本语法svg/svg标签包裹里面是svg图形比如circle表示圆形rect表示矩形width宽度height高度xmlnssvg指定的规定的XML命名空间svgwidth200height200xmlnshttp://www.w3.org/2000/svgcirclecx100cy100r80fillblue//svg基本图形简述圆形cx,cy圆心坐标r半径矩形使用 rect 元素绘制矩形可以指定矩形的位置、大小、圆角等属性。椭圆:指定椭圆的中心坐标和长短轴的半径fill填充颜色ellipse cx100 cy100 rx80 ry50 fillgreen /直线终点起点位置stroke的边框颜色stroke-width宽度line x150 y150 x2150 y2150 strokeblack stroke-width2 /多边形指定多个顶点的位置polygon points100,50 150,150 50,150 fillorange /折线同多边形就是填充颜色为none就可以polyline points100,50 150,150 50,150 fillnone strokeblue stroke-width2 /路径使用 path 元素绘制路径可以通过指定一系列的路径命令来绘制各种形状。path dM10 10 L90 10 L90 90 Z fillnone strokeblack stroke-width2 /渐变和填充使用 linearGradient 或 radialGradient 定义渐变。使用 fill 和 stroke 属性指定填充和描边样式。文本和字体使用 text 元素插入文本。使用 font-family、font-size 等属性控制文本样式。嵌套和分组g idgroup1!-- g标签定义一个分组 id是分组的唯一标识--!-- 分组内的图形元素 --rect x10 y10 width50 height50 /circle cx100 cy100 r30 //g以矩形为例rectxx-coordinate !-- 矩形左上角的 x 坐标 --yy-coordinate!-- 矩形左上角的 y 坐标 --widthwidth-value!-- 矩形的宽度 --heightheight-value!-- 矩形的高度 --rxrx-value!-- 矩形的圆角半径水平方向 --ryry-value!-- 矩形的圆角半径垂直方向 --fillfill-color!-- 矩形的填充颜色 --strokestroke-color!-- 矩形的描边颜色 --stroke-widthwidth-value!-- 矩形的描边宽度 --stroke-opacity0.9/style 属性用来定义 CSS 属性svg xmlnshttp://www.w3.org/2000/svg version1.1rect width300 height100stylefill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)//svg属性strokesvg中的stroke属性用于定义图片元素的描边它可以应用与任何具有轮廓的图形元素。stroke//描述描边颜色stroke-width//描述描边宽度stroke-linecap//定义不同类型的开放路径的终结butt/rounde/squarestroke-dasharray//描边的样式就是第一个值为宽度第二个值为间距svg xmlnshttp://www.w3.org/2000/svg version1.1g fillnone strokeblack stroke-width4path stroke-dasharray5,5 dM5 20 l215 0 /path stroke-dasharray10,10 dM5 40 l215 0 /path stroke-dasharray20,10,5,5,5,10 dM5 60 l215 0 //g/svgstroke-opacity//描边透明度filter滤镜svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义滤镜 --filter idfilter_id!-- 滤镜效果 --/filter!-- 应用滤镜的目标元素 --rect x50 y50 width100 height80 filterurl(#filter_id) //svgfeGaussianBlurSVG 中的模糊效果可以通过 feGaussianBlur 元素实现该元素使用高斯模糊算法来模糊图像。两个参数stdDeviation:指定高斯模糊的标准差可以有两个值表示水平和垂直方向的标准差一个值说明水平喝垂直方向一致。标准差越大模糊程度越高。in指定输入图像通常为SourceGraphic表示应用滤镜效果的目标元素本身。svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义模糊滤镜 --filter idblur_filterfeGaussianBlur inSourceGraphic stdDeviation5 //filter!-- 应用模糊滤镜的矩形 --rect x50 y50 width100 height80 fillred filterurl(#blur_filter) //svgfeOffset 用于图像上的偏移量它的作用是将输入图像的每个像素沿着指定的水平和垂直方向移动一定的距离然后将结果图像作为滤镜效果的输出。dx 属性定义了阴影在水平方向上的偏移量。dy 属性定义了阴影在垂直方向上的偏移量。svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义偏移滤镜 --filter idoffset_filterfeOffset dx5 dy5 //filter!-- 应用偏移滤镜的矩形 --rect x50 y50 width100 height80 fillred filterurl(#offset_filter) //svgfeDropShadow实现阴影效果svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义阴影滤镜 --filter idshadow_filterfeDropShadow dx5 dy5 stdDeviation5 flood-colorgray flood-opacity0.5 //filter!-- 应用阴影滤镜的矩形 --rect x50 y50 width100 height80 fillred filterurl(#shadow_filter) //svglinearGradient线性渐变id定义线性渐变的唯一标识符用于在svg图像中引用该渐变x1,y1定义渐变的起始点坐标x2,y2定义渐变的结束点坐标stop 元素用于指定渐变中的颜色和颜色的位置。svg xmlnshttps://www.w3.org/2000/svg version1.1defslinearGradient idgrad1 x10% y10% x2100% y20%stop offset0% stylestop-color:rgb(150,185,0);stop-opacity:1 /stop offset100% stylestop-color:rgb(255,0,0);stop-opacity:1 //linearGradient/defsellipse cx200 cy70 rx85 ry55 fillurl(#grad1) //svgradialGradient放射性的渐变svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 定义径向渐变 --radialGradient idgradient cx50% cy50% r50% fx50% fy50%stop offset0% stop-colorred /stop offset100% stop-colorblue //radialGradient!-- 应用径向渐变的圆形 --circle cx100 cy100 r80 fillurl(#gradient) //svg参考文章https://www.runoob.com/svg/svg-examples.html
