SVG.js 颜色渐变使用
一、SVG.Gradient
1.线性渐变、径向渐变,设置渐变的起始点,设置径向渐变的外层半径
var draw = SVG('svg1').size(300, 300);
//SVG.Gradient 渐变处理 linear、radial
//线性渐变 linear
//径向渐变 radial
var gradient = draw.gradient('radial', function (stop) {
stop.at(0, '#f06');
stop.at(1, '#0f9');
}); var rect = draw.rect(100, 100);
rect.attr({ fill: gradient });
rect.stroke({ color: 'blue' }) //修改 起始位置,结束为止 gradient.from(),to()
gradient.animate(1000).from(0, 0).to(1, 1).loop(true, true);
//gradient.get()
//获取第一个stop的Dom
var s1 = gradient.get(0);
console.info(s1);
//gradient.radius() 设置径向渐变的最外层半径
gradient.from(0, 0).to(1, 1).radius(0.5);
二、SVG.Stop
1.修改stop元素,修改Gradient内容
var draw = SVG('svg1').size(300, 300);
//SVG.Stop
var s1, s2, s3
var gradient = draw.gradient('radial', function (stop) {
//stop.at() //设置stop的属性
s1 = stop.at(0, '#000')
s2 = stop.at(0.5, '#f03')
s3 = stop.at(1, '#0f9')
});
var rect = draw.rect(100, 100);
rect.fill(gradient);
//stop.update() 修改颜色值
s1.update(0.1, '#0f0', 1)
//gradient.update() 修改渐变内容
//stop.update()
gradient.update(function (stop) {
stop.at(0.1, '#333', 0.2);
stop.at(0.9, '#f03', 1);
});
var draw = SVG('svg1').size(300, 300);
//SVG.Gradient 渐变处理 linear、radial
var gradient = draw.gradient('radial', function (stop) {
// stop.at(0, '#f06');
// stop.at(1, '#0f9');
// at()方法指定对象
stop.at({ offset: 0, color: '#f06', opacity: 0.5 });
stop.at({ offset: 1, color: '#0f9', opacity: 1 });
});
var rect = draw.rect(100, 100);
rect.attr({ fill: gradient });
rect.stroke({ color: 'blue' })
rect.radius(10); // var fill1=gradient.fill();
// console.info(fill1); //返回 radialGadient 的id的url :url(#SvgjsRadialGradient1008)
更多:
SVG.js 颜色渐变使用的更多相关文章
- SVG.js Marker标记和自定义标签
一.SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线,折线的各点,多边形和路径.有三种类型的标记:开始,中间和结束.如果开始表示第一个点,则结束中间的最后一点和中间点. v ...
- SVG.js Mask覆盖和ClipPath裁剪
一.SVG.Mask 覆盖物设置 1. var draw = SVG('svg1').size(300, 300); //SVG.Mask 覆盖物设置 var ellipse = draw.ellip ...
- SVG.js 图案使用和use引用
一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.patt ...
- SVG之颜色、渐变和笔刷的使用
一.颜色 我们之前使用英文来表示颜色并进行填充,比如: <circle cx="800" cy="120" r="110" strok ...
- 颜色渐变的JS代码
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- svg.js教程及使用手册详解(一)
做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...
- Svg.Js 简介(转)
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- css文字颜色渐变的3种实现
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
随机推荐
- Redis整体
介绍 Redis是一个开源的高性能的key-value存储系统.具有以下特点: 1.Redis支持数据的持久化,可以将内存中的数据保持在磁盘中,重启的时候可以再次加载进行使用. 2.Redis不仅仅支 ...
- Qt代码创建分隔条
我们在使用Qt时,会发现在使用UI界面时可以添加窗口分隔条,但我们使用纯代码时却没有分隔条的类函数.这时候我们就需要手动添加,添加方式和Qt自定义标签按钮一样,下面我直接写代码.如果不知道怎么添加的, ...
- JavaWeb中Tomcat与Eclipse的集成—步骤详解
前面会简单介绍,下翻Tomcat与Eclipse的集成 一.先介绍一下应用程序的结构: 1.到目前为止应用程序物理结构有两种: C/S——Client / server:这种结构的应用,客户端与服务端 ...
- poj-1459-最大流dinic+链式前向星-isap+bfs+stack
title: poj-1459-最大流dinic+链式前向星-isap+bfs+stack date: 2018-11-22 20:57:54 tags: acm 刷题 categories: ACM ...
- Gift动图分解小工具
gif 动图分解小工具 Overview 因为自己有时候需要将一些gif图片分解,但是没有在网上找到合适的工具,所有就自己写了一个,在这里与大家分享,其实实现很简单,是通过C#实现的.文章下方有下载链 ...
- 运行程序,解读this指向---case4
var param = 'window'; var obj1 = { param: 'obj1', fn1: function () { console.log(this.param); }, fn2 ...
- hdu 4445 37届金华赛区 D题
题意:给一个坦克的高度,求炮弹能打中最多的数量 枚举角度,作为一名学霸虽然很快推出了公式,但是却没有考虑到,角度可以朝下的情况 #include<cstdio> #include<i ...
- Java内存泄露分析和解决方案及Windows自带查看工具
Java内存泄漏是每个Java程序员都会遇到的问题,程序在本地运行一切正常,可是布署到远端就会出现内存无限制的增长,最后系统瘫痪,那么如何最快最好的检测程序的稳定性,防止系统崩盘,作者用自已的亲身经历 ...
- Linux学习笔记05—文件与目录权限
1. 绝对路径与相对路径绝对路径:路径的写法一定由根目录 ‘/’写起,例如 /usr/local/mysql 这就是绝对路径相对路径:路径的写法不是由根目录 ‘/’写起,例如:首先用户进入到/, 然后 ...
- Python包管理工具pip安装
Python版本在2.7.9+以上的都自带pip无需安装,但在CentOS 7里面自带的Python是2.7.5,所以需要单独安装. 安装: curl https://bootstrap.pypa.i ...