`
helius1214
  • 浏览: 77784 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类

<radialGradient> 用来定义放射性渐变。

阅读更多
放射性渐变
<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

    Android自定义View中,使用RadialGradient来实现椭圆形的放射性渐变效果。 Android中实现椭圆形的绘制很简单,只需要调用canvas.drawOval()就可以了,但是椭圆形的中心发散渐变效果Android自带的API里面却是没有的,...

    Android实现 Shape属性gradient 渐变效果

    【1】&lt;gradient&gt;用以定义渐变色,可以定义两色渐变和三色渐变,及渐变样式;  &lt;?xml version=1.0 encoding=utf-8?&gt;&lt;shape xmlns:android=http://schemas.android.com/apk/res/android&gt; &lt;gradient  ...

    plutosvg:C中的微小SVG渲染库

    符号文字(TODO):文字,tspan,tref 图片(TODO)例子# include &lt; plutosvg&gt;# include &lt; stdlib&gt;# include &lt; stdio&gt;int main ( void ){ plutovg_surface_t * surface = plutosvg_load_from_file &#40; " camera....

    Paint_RadialGradient.rar

    对应的CSDN文章:https://blog.csdn.net/gaoxiaoweiandy/article/details/104127732

    浅谈Flutter 中渐变的高级用法(3种)

    RadialGradient:放射状渐变 SweepGradient:扇形渐变 看下原图,下面的渐变都是在此图基础上完成。 LinearGradient 给一张图片添加从上到下的线性渐变: ShaderMask( shaderCallback: (Rect bounds) { return...

    Qt Creator 的安装和hello world 程序+其他程序的编写--不是一般的好

    并在logindlg.cpp 中加入#include &lt;QtGui&gt;的头文件。如果不加这个头文件, QMessageBox 类不可用。 9.这时再执行程序,输入用户名为qt,密码为123456,按登录按钮便能进入主 窗口了,如果输入错了,就会弹出警告...

    《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》对应源码

    博客《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》对应源码,博客地址:http://blog.csdn.net/harvic880925/article/details/52653811

    flutter_gradients:精选的Dart for Flutter中令人敬畏的渐变

    颤动渐变 精选的Dart制作的令人敬畏的渐变(Flutter的端口)。 目前仅包含线性渐变。 显示一些 :red_heart: 并为回购加注星标以支持该项目 安装 添加包裹 dependencies : flutter_gradients : ^1.0.0+3 用法 ...

    点击后可缩放的渐变圆

    一个小view,使用RadialGradient环形渲染的圆,点击后客缩放

    《Android自定义组件开发详解》

    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 ...

    兼容当前五大浏览器的渐变颜色背景gradient的写法

    兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景,下面是当前五大浏览器对 gradient 的支持

    用于SVG生成的Go语言库-Golang开发

    支持的SVG元素和功能形状,直线,文本圆,椭圆,多边形,折线,矩形(包括圆角矩形),直线,文本常规路径,圆弧,三次方和二次贝塞尔曲线路径,图像和渐变图像,linearGradient,radialGradient,变换转换,旋转,...

    svgo:用于SVG生成的Go语言库

    该库生成可缩放矢量图形1.1规范( )定义的SVG。 输出进入指定的io.Writer。 支持的SVG元素和功能 形状,线条,文字 圆,椭圆,多边形,折线,矩形(包括圆角矩形),线,文本 路径 一般,弧形,三次和二次贝塞尔...

    gensvg:gensvg将SVG生成到io.Writer

    支持的SVG元素和功能形状,线条,文字圆,椭圆,多边形,折线,矩形(包括圆角矩形),线,文本,tspan路径一般,弧形,三次和二次贝塞尔曲线路径,图像和渐变图片,linearGradient,radialGradient,变身平移,旋转...

    Android应用中绘制圆形头像的方法解析

    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/...

    GlowTextView

    第一: 文字着色Android 为我们提供了着色器 (shader类),Shader下并为我们提供了5个子类分别是:BitmapShader ----Bitmap着色LinearGradient ----线性渐变着色RadialGradient ----梯度着色SweepGradient ----唤醒着色...

    HTML5 Canvas渐进填充与透明实现图像的Mask效果

    一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为: createLinearGradient(x1, y1, x2, y2); 其中...

Global site tag (gtag.js) - Google Analytics