天津建设培训中心网站,广州网页设计培训视频,做刷网站怎么赚钱,短视频营销推广方案SVG矢量图#xff1a;
html5支持内联svg,svg指可以伸缩的矢量图#xff0c;其优点是放大不会模糊#xff0c;支持任意尺寸打印不损坏品质#xff0c;可通过编辑器创建和修改#xff0c;#xff1b;使用XML定义#xff0c;其本质就是XML文件#xff0c;和Canvas类似
html5支持内联svg,svg指可以伸缩的矢量图其优点是放大不会模糊支持任意尺寸打印不损坏品质可通过编辑器创建和修改使用XML定义其本质就是XML文件和Canvas类似
在html中使用SVG图像
SVG 文件可通过、 或者 标签嵌入 HTML 文档,或直接链接到SVG文件。具体如下 !-- 此标签允许使用脚本支持在HTML5中使用 --embed srccircle1.svg typeimage/svgxml /!-- 此标签不支持脚本支持在HTML5和HTML4、XHTML使用 --object datacircle1.svg typeimage/svgxml/object!-- 允许使用脚本支持HTML5中使用 --iframe srccircle1.svg/iframe!-- 直接显示在HTML元素中 --divsvg xmlnshttp://www.w3.org/2000/svg version1.1circle cx100 cy50 r40 strokeblack stroke-width2 fillred //svg/div!-- 当点击链接后跳到SVG文件显示图像 --a hrefcircle1.svg点击查看SVG文件/aSVG中预定义图形
SVG像Canvas一样提供了一套预定义好的元素标签这些标签可以是单标签也可以是双标签控制属性的属性词位置和html标签中的属性写法一样可以用style属性替换具体如下面案例 divsvg width500 height600!-- 1.sircle/ 定义圆其中属性cx定义圆心横坐标 cy定义圆心纵坐标 r定义圆的半径 stroke定义圆边框的颜色 stroke-width定义圆边框的宽度 fill定义圆的填充颜色 --circle cx100 cy50 r40 strokeblack stroke-width2 fillred /circle cx10 cy50 r40 strokeyellow stroke-width2 fillblue opacity.5/circle!-- 2.rect/ 定义矩形x和y表示坐标 rx和ry定义圆角 width和height定义尺寸 stroke定义描边颜色 stroke-width定义描边宽度 fill定义填充颜色 opacity定义半透明当前加以下前缀则表示该属性控制的半透明--rect x30 y130 rx20 ry20 width200 height50 strokeyellow stroke-width10 stroke-opacity .4 fillblue fill-opacity0.5/rect width300 height100 stylefill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)/rect!-- 3.ellipse/ 定义椭圆cx和cy表示圆心坐标 rx和ry表示水平半径和垂直半径 后面的属性和上面一样--ellipse cx300 cy80 rx50 ry50 stylefill:yellow;stroke:purple;stroke-width:2/!-- 4.line/ 定义直线x1和y1表示直线起始坐标 x2和y2表示结束坐标 后面属性和上面一致--line x120 y120 x2200 y2200 stylestroke:rgb(255,0,0);stroke-width:2/!-- 5.polygon/ 定义至少三条边的多边形points左边对里面表示x,y的坐标对每个坐标对表示线的交点有前后顺序自动封闭后面属性和上面一致--!-- fill-rule属性由于判断画布上某区域是否属于该图形内部内部区域会被填充外部区域则不会被填充属性值nonzero | evenodd | inherit,关于属性值解释查阅官方文档https://www.runoob.com/svg/svg-polygon.html --polygon points0,0 100,0 100,100 0,100 stylefill:lime;stroke:purple;stroke-width:1/!-- 6.polyline 定义折线 points属性里面的值是x,y的坐标对有前后顺序依次连接后面的属性和上面一致--polyline points20,20 40,25 60,40 80,120 120,140 200,180 stylefill:none;stroke:black;stroke-width:3 /!-- 7.path/ 定义路径下面的命令可用于路径数据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,注意以上所有命令均允许小写字母。大写表示绝对定位小写表示相对定位。--path dM150 0 L75 200 L225 200 Z /!-- 8.text/text 文本 x和y表示开始坐标 transform表示转换里面rotate(角度 坐标)表示旋转--text x100 y15 transformrotate(45 0,100) fillredhello word/text/svg/divSVG滤镜
SVG滤镜用来增加对SVG图形的特殊效果如
SVG可用的滤镜是feBlend - 与图像相结合的滤镜、feColorMatrix - 用于彩色滤光片转换、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset - 过滤阴影、feSpecularLighting、feTile、feTurbulence、feDistantLight - 用于照明过滤、fePointLight - 用于照明过滤、feSpotLight - 用于照明过滤除此之外您可以在每个 SVG 元素上使用多个滤镜。
滤镜定义在元素中标签用来定义SVG滤镜,如 divsvgdefsfilter idf1 x0 y0feGaussianBlur inSourceGraphic stdDeviation15 /!--feGaussianBlur 用于创建模糊效果 --/filter/defsrect width90 height90 strokegreen stroke-width3 fillyellow filterurl(#f1) //svg/divSVG渐变
SVG渐变主要有两种类型Linear线性渐变、Radial径向渐变 divsvgdefslinearGradient idgr x10% y1100% x2100% y20%stop offset0% stop-colorrgb(255,255,0)/stop offset100% stop-colorrgb(0,0,0)//linearGradient/defsellipse cx0 cy0 rx100 ry100 fillurl(#gr) //svg/div推荐文档
由于SVG在实际开发中并不常用因此这里不做详细介绍如果想了解更多建议阅读官方文档https://www.runoob.com/svg/svg-tutorial.html
提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者 删除。 笔者苦海
