放射性渐变
<radialGradient> 用来定义放射性渐变。
<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义。
请把下面的代码拷贝到记事本,然后把文件保存为 "radial1.svg"。把此文件放入您的 web 目录:
<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>代码解释:
<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称,fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变,cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
查看例子
另一个例子:
<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>查看例子
分享到:
相关推荐
Android自定义View中,使用RadialGradient来实现椭圆形的放射性渐变效果。 Android中实现椭圆形的绘制很简单,只需要调用canvas.drawOval()就可以了,但是椭圆形的中心发散渐变效果Android自带的API里面却是没有的,...
【1】<gradient>用以定义渐变色,可以定义两色渐变和三色渐变,及渐变样式; <?xml version=1.0 encoding=utf-8?><shape xmlns:android=http://schemas.android.com/apk/res/android> <gradient ...
符号文字(TODO):文字,tspan,tref 图片(TODO)例子# include < plutosvg># include < stdlib># include < stdio>int main ( void ){ plutovg_surface_t * surface = plutosvg_load_from_file ( " camera....
对应的CSDN文章:https://blog.csdn.net/gaoxiaoweiandy/article/details/104127732
RadialGradient:放射状渐变 SweepGradient:扇形渐变 看下原图,下面的渐变都是在此图基础上完成。 LinearGradient 给一张图片添加从上到下的线性渐变: ShaderMask( shaderCallback: (Rect bounds) { return...
并在logindlg.cpp 中加入#include <QtGui>的头文件。如果不加这个头文件, QMessageBox 类不可用。 9.这时再执行程序,输入用户名为qt,密码为123456,按登录按钮便能进入主 窗口了,如果输入错了,就会弹出警告...
博客《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》对应源码,博客地址:http://blog.csdn.net/harvic880925/article/details/52653811
颤动渐变 精选的Dart制作的令人敬畏的渐变(Flutter的端口)。 目前仅包含线性渐变。 显示一些 :red_heart: 并为回购加注星标以支持该项目 安装 添加包裹 dependencies : flutter_gradients : ^1.0.0+3 用法 ...
一个小view,使用RadialGradient环形渲染的圆,点击后客缩放
5.3.2 径向渐变(RadialGradient) 130 5.3.3 扫描渐变(SweepGradient) 135 5.3.4 位图渐变(BitmapShader) 138 5.3.5 混合渐变(ComposeShader) 140 5.3.6 渐变与Matrix 142 5.4 位图运算 143 5.4.1 ...
兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景,下面是当前五大浏览器对 gradient 的支持
支持的SVG元素和功能形状,直线,文本圆,椭圆,多边形,折线,矩形(包括圆角矩形),直线,文本常规路径,圆弧,三次方和二次贝塞尔曲线路径,图像和渐变图像,linearGradient,radialGradient,变换转换,旋转,...
该库生成可缩放矢量图形1.1规范( )定义的SVG。 输出进入指定的io.Writer。 支持的SVG元素和功能 形状,线条,文字 圆,椭圆,多边形,折线,矩形(包括圆角矩形),线,文本 路径 一般,弧形,三次和二次贝塞尔...
支持的SVG元素和功能形状,线条,文字圆,椭圆,多边形,折线,矩形(包括圆角矩形),线,文本,tspan路径一般,弧形,三次和二次贝塞尔曲线路径,图像和渐变图片,linearGradient,radialGradient,变身平移,旋转...
RadialGradient gradient = new RadialGradient(j/2,k/2,j/2,new int[]{0xff5d5d5d,0xff5d5d5d,0x00ffffff},new float[]{0.f,0.8f,1.0f}, Shader.TileMode.CLAMP); paint.setShader(gradient); canvas.drawCircle(j/...
第一: 文字着色Android 为我们提供了着色器 (shader类),Shader下并为我们提供了5个子类分别是:BitmapShader ----Bitmap着色LinearGradient ----线性渐变着色RadialGradient ----梯度着色SweepGradient ----唤醒着色...
一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为: createLinearGradient(x1, y1, x2, y2); 其中...