SVG & gradient & color

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients



<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <defs>

      <linearGradient id="Gradient1">

        <stop class="stop1" offset="0%"/>

        <stop class="stop2" offset="50%"/>

        <stop class="stop3" offset="100%"/>

      </linearGradient>

      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">

        <stop offset="0%" stop-color="red"/>

        <stop offset="50%" stop-color="black" stop-opacity="0"/>

        <stop offset="100%" stop-color="blue"/>

      </linearGradient>

      <style type="text/css"><![CDATA[

        #rect1 { fill: url(#Gradient1); }

        .stop1 { stop-color: red; }

        .stop2 { stop-color: black; stop-opacity: 0; }

        .stop3 { stop-color: blue; }

      ]]></style>

  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>

  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>

</svg>

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

SVG & gradient & color的更多相关文章

  1. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  2. css text gradient color, css fonts gradient color

    css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...

  3. CSS3 & gradient & color & background

    CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...

  4. svg gradient

    SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性. 基本有下面这些定义颜色的方式: 1. 颜色名字: 直接使用颜色名字red ...

  5. gradient color

    http://www.cnblogs.com/YouXianMing/p/3793913.html layer 不能自动autolay, 只能在viewDidLayout里面设置宽度 - (void) ...

  6. 图像处理------颜色梯度变化 (Color Gradient)

    有过UI设计经验的一定对2D图形渲染中的Color Gradient 或多或少有些接触,很多编程 语言也提供了Gradient的接口,但是想知道它是怎么实现的嘛? 本文介绍三种简单的颜色梯度变化算法, ...

  7. SVG.js 颜色渐变使用

    一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...

  8. SVG开发包, 20 个有用的 SVG 工具，提供更好的图像处理

    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...

  9. 8个实用的SVG工具，20 个有用的 SVG 工具，五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

随机推荐

  1. 关闭（隐藏）VS2019控制台上文件路径的显示

    昨天有个朋友问我,怎么关闭在运行程序后,控制台上显示的文件路径啊?啥??我突然不知道他说的说什么,然后我就自己随便打了几行运行了一下,才知道原来他说的是这个: 一开始我也没在意,我就告诉他,这个无所谓 ...

  2. 写给小白的 Nginx 文章

    原文地址:Nginx concepts I wish I knew years ago 原文作者:Aemie Jariwala(已授权) 译者 & 校正:HelloGitHub-小鱼干 &am ...

  3. JavaScript（二）——在 V8 引擎中书写最优代码

    概述 一个 JavaScript 引擎就是一个程序或者一个解释程序,它运行 JavaScript 代码.一个 JavaScript 引擎可以用标准解释程序或者即时编译器来实现,即时编译器即以某种形式把 ...

  4. oracle根据日期计算星期几

    工作中用到的,在存储过程中的语句,简单记下: /** 判断输入日期是星期几 */ select decode(to_char(to_date(iv_date,'yyyy-mm-dd'), 'day') ...

  5. sql,关键字使用

    select instr('dds万','万',1) from dual --判断万关键字是否存在 select to_single_byte('9') from dual --全角数字转为半角数字 ...

  6. 关闭Linux - centos7的防火墙

    关闭Centos7的防火墙 在每台虚拟机上分别执行以下指令: systemctl stop firewalld.service #停止firewall systemctl disable firewa ...

  7. 坐下坐下，基本操作（ZooKeeper 操作篇）

    本文作者:HelloGitHub-老荀 Hi,这里是 HelloGitHub 推出的 HelloZooKeeper 系列,免费开源.有趣.入门级的 ZooKeeper 教程,面向有编程基础的新手. Z ...

  8. Sqoop export参数updatemode两种模式updateonly和allowinsert区别

    1.更新导出(updateonly模式)1.1参数说明-- update-key,更新标识,即根据某个字段进行更新,例如id,可以指定多个更新标识的字段,多个字段之间用逗号分隔. -- updatem ...

  9. Java——方法及构造方法、intellij IDEA中的一些快捷键

    intellij IDEA中的一些快捷键: 一.方法基础 给你一个两个int类型的数相加的例子: 这个例子说明了 public static void main(String[] args) {}相当 ...

  10. VMX - block by NMI和 NMI unblockinig due to IRET 之间的关系

    相关SDM章节: 27.2.3- Information About NMI Unblocking Due to IRET 最近收到同事发来的一个问题,即: VMCS 中的 Guest Interru ...