【H5】 svg的 defs用法渐变

defs

defs元素用于预定义一个元素使其能够在SVG图像中重复使用。在元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用元素来引入它们 symbol 元素用于定义可重复使用的符号。嵌入在元素中的图形是不会被直接显示的，除非你使用元素来引用它。一个元素可以有preserveAspectRatio和viewBox属性

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;"><svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'><!-- defs包裹 --><defs><g><!--(cx,cy)圆心点位置  --><circle id='circle1' cx="50" cy="50" r="50" fill="pink"> </circle><circle id='circle2' cx="50" cy="50" r="50" fill="pink"> </circle>  </g></defs><!-- 将defs内写好的样式通过id显示到页面上 --><use xlink:href="#circle1" x='50' y='100'></use><use xlink:href="#circle2" x='150' y='100'></use><!-- symbol包裹 --><symbol><circle id='circle11' cx="50" cy="50" r="50" fill="#000"></circle><circle id='circle22' cx="50" cy="50" r="50" fill="#000"></circle> </symbol><!-- 将symbol内写好的样式通过id显示到页面上 --><use xlink:href="#circle11" x='50' y='300'></use><use xlink:href="#circle22" x='150' y='300'></use></svg>
</div>

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;"><svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'><defs><!-- linearGradient线性渐变 x1 x2 x3也可以设置渐变位置样式可写可不写 --><linearGradient id="grad1" x1="10%" x2="80%" x3="100%"><!-- offset渐变位置百分比 --><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop><stop offset="50%" style="stop-color:rgb(36, 240, 9);stop-opacity:1"></stop><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop></linearGradient></defs><!--  (cx,cy)位置 rx长半径 ry短半径 通过id给椭圆设置写好的渐变色 --><ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/></svg>
</div>

【H5】 svg的 defs用法渐变相关推荐

SVG阴影滤镜及渐变基础
<defs>元素是定义的标签,包含特殊元素的定义. <filter>元素用于定义svg滤镜.具有必需的id属性,用于标识滤镜,相当于定义一个过滤器 <feOffset&g ...
用H5 canvas实现唯美渐变色块的绘制
随着Web前端的不断发展,我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果.一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能.今天我们来讲述一下简单H5 canvas ...
H5 video 标签的用法及问题
h5的video标签的用法及问题关于HTML5视频标签的问题一.基本 *video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8 ...
H5 video标签的用法及问题
关于HTML5视频标签的问题一.基本 video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8的(Opera.Mozilla.Ch ...
H5+svg 实现左边图片右边文字描述的梯形微名片
先上效果图源码分享 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
微信浏览器video标签没有封面_微信h5页面video标签用法总结
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置 ...
网页编程技术三（H5中表格的用法）
1.表格的基本结构: 表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></t ...
H5 iframe标签的用法
功能:iframe标签用于定义内联框架. 语法:<iframe></iframe> 注意: 在很多网页上使用某些公共部分时,需要给iframe 设置宽度,不然内容只会显示一部分 ...
H5 前端模板 JS 用法
不用引用JS 直接这样就能绑定数据了 var html="";for(var i=0;i<ret.rows.length;i++){var dd=ret.rows[i];ht ...
SVG滤镜、阴影、渐变
1.SVG滤镜: feBlend:与图像相结合的滤镜 feColorMatrix:用于彩色滤光片转换 feComponentTransfer feComposite feConvolveMatrix ...

【H5】 svg的 defs用法渐变

defs

【H5】 svg的 defs用法渐变相关推荐

最新文章

热门文章

【H5】 svg的 defs用法 渐变

defs

【H5】 svg的 defs用法 渐变相关推荐

最新文章

热门文章

【H5】 svg的 defs用法渐变

【H5】 svg的 defs用法渐变相关推荐