开发者社区> 技术小美> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SVG颜色、渐变和填充

简介:
+关注继续查看

SVG颜色、渐变和填充

颜色

RGB和HSL都是CSS3支持的颜色表示方法,一般普遍使用是RGB。PS:HSL浏览器兼容。

RGB

RGB即是代表红、绿、蓝三个通道的颜色,通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

表示方式 取值范围 优点 缺点
rgb(r, g, b)
[0, 255]
每个分量
显示器容易分析,
目前的显示器大都是采用了RGB颜色标准
不符合人类描述颜色的习惯
#rrggbb 00 - FF
十六进制正整数
   

例子:

 

HSL

HSL即是代表色相,饱和度,亮度三个通道的颜色,通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

表示方式 取值范围 优点
hsl(h, s%, l%)
h:[0, 359]
s,l:[0, 100]
符合人类描述颜色的习惯

例子:

 

互相转换的原理

互相转换的原理挺复杂,就不多说。

用js实现RGB与HSL的互相转换,可查看:http://www.zhangxinxu.com/wordpress/2010/03/javascript-hex-rgb-hsl-color-convert/

透明度

设置颜色的透明度,有两种方法:

1. rgb(r, g ,b ,a)和hsl(h, s%, l%, a) 表示带透明度的颜色。

2. opacity属性表示元素的透明度。

PS:a和opacity的取值范围:[0, 1]

渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡,两种主要渐变是线性渐变和径向渐变。

线性渐变

<linearGradient> 可用来定义 SVG 的线性渐变,主要是定义方向和颜色。
<linearGradient> 标签一般嵌套在 <defs> 的内部。 (SVG的<defs>元素用于预定义(不会显示)一个元素使其能够在SVG图像中重复使用。)

渐变方向

方向 参数
水平 当 y1 和 y2 相等,而 x1 和 x2 不同时
垂直 当 x1 和 x2 相等,而 y1 和 y2 不同时
角形 当 x1 和 x2 不同,且 y1 和 y2 不同时

示例:

复制代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop offset="0%" stop-color="blue"/>
               <stop offset="50%" stop-color="orange"/>
               <stop offset="100%" stop-color="red"/>
          </linearGradient>
     </defs>
     <ellipse cx="200" cy="190" rx="80" ry="50" style="fill:url(#orange_red)"/>
</svg>
复制代码

效果:

代码解析:

1. <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称。
2. fill:url(#orange_red) 属性把ellipse元素链接到此渐变。
3. <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置。
4. 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

注意:

gradientUnits,它定义了渐变使用的坐标单位。这个属性有2个可用值:userSpaceOnUse和objectBoundingBox(默认值)。

名称 单位 使用坐标系 描述
objectBoundingBox(默认值) 百分比 自身坐标系 基于渐变元素的长宽的百分比。
userSpaceOnUse 数值 原始坐标系 相对原始坐标系的数值(绝对值)。

为了让userSpaceOnUse的效果跟objectBoundingBox一致,那上面代码需变成

复制代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <linearGradient id="orange_red" x1="120" y1="120" x2="300" y2="120" gradientUnits="userSpaceOnUse">
               <stop offset="0%" stop-color="blue"/>
               <stop offset="50%" stop-color="orange"/>
               <stop offset="100%" stop-color="red"/>
          </linearGradient>
     </defs>
     <ellipse cx="200" cy="200" rx="80" ry="50" style="fill:url(#orange_red)"/>
</svg>
复制代码
PS:不同的部分是橙色部分,这部分需要根据图形在原始坐标系的位置算出来,还是比较麻烦。

径向渐变

<radialGradient> 可用来定义 SVG 的径向渐变,主要是定义方向和颜色。

渐变方向

cx、cy 和 r 属性定义外圈,而 fx和fy 定义内圈(可认为是往哪聚焦) 。

名称 描述 默认值
cx 渐变的中心点x位置 50%
cy 渐变的中心点y位置 50%
r 渐变的半径 50%
fx 渐变的焦点 0%
fy 渐变的焦点 0%

示例:

复制代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <radialGradient id="orange_red" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" stop-color="blue"/>
               <stop offset="50%" stop-color="orange"/>
               <stop offset="100%" stop-color="red"/>
          </radialGradient>
     </defs>
     <circle cx="200" cy="200" r="80" style="fill:url(#orange_red)"/>
</svg>
复制代码

效果:

 

PS:radialGradient也有gradientUnits参数。

填充

SVG的填充可以用一个SVG元素,也可以是位图图像,通过<pattern>元素在x轴或y轴方向以固定的间隔平铺。

示例:

复制代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <pattern id="grid" x="100" y="100" width="0.2" height="0.2">
               <circle cx="10" cy="10" r="5" fill="red"></circle>
               <polygon points="30 10 60 50 0 50" fill="green"></polygon>
          </pattern>
     </defs>
    <rect x="100" y="100" width="400" height="300" fill="url(#grid)" stroke="blue"></rect>
</svg>
复制代码

效果:

参数

名称 描述 默认值
x 填充图案的x偏移量,来自左上角 0
y 填充图案的y偏移量,来自左上角 0
width 填充图案的宽度 0
height 填充图案的高度 0
patternUnits 设置pattern的使用单位 objectBoundingBox
patternContentUnits 设置pattern内图案的使用单位 userSpaceOnUse

PS:patternUnits和patternContentUnits的取值都一样,userSpaceOnUse和objectBoundingBox,只不过默认值不一样。

使用位图示例

复制代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <pattern id="pattern-image" x="0" y="0" width="0.2" height="0.2">
               <image xlink:href="face.gif" x="0" y="0" width="50" height="50"></image>
          </pattern>
     </defs>
    <rect x="100" y="100" width="400" height="300" fill="url(#pattern-image)" stroke="blue"></rect>
</svg>
复制代码

效果:

 

代码地址

想看文章的代码示例,可以到我的Github下载:https://github.com/codingforme/code-learn/tree/master/svg

 

参考文献

1. http://www.w3school.com.cn/svg/svg_grad_linear.asp

2. http://www.cnblogs.com/lhweb15/p/5489699.html

3. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5971781.html

分类: 1.前端基础

本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/5971781.html   ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端 - Lottie 中渐变填充的实现研究(一)
前端 - Lottie 中渐变填充的实现研究(一)
114 0
前端 - Lottie 中渐变填充的实现研究(一)
前端 - Lottie 中渐变填充的实现研究(一)
69 0
svg
http://www.w3school.com.cn/html5/html_5_svg.asphttp://www.w3school.com.cn/svg/index.asp
808 0
div圆角和颜色渐变的设置
1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
583 0
SVG
SVG 是 HTML5 中矢量图的标记语言,它保持了强大的绘图能力的同时,具有非常高端的使用接口,通过直接操作 Dom 节点的形式来操作图形。 本课程意在让学生掌握 SVG 这门语言和它对应的一些 API,再结合2D绘图的知识,让学生具有对页面复杂图形的渲染和控制能力。
852 0
svg
摘要:   之前介绍了canvas制作图像,今天再分享svg制作图像。 简介:   SVG 意为可缩放矢量图形(Scalable Vector Graphics)。SVG 使用 XML 格式定义图像。
1223 0
11g升级性能问题之一 重建user_synonyms
在测试环境11g升级之后,从测试那边反馈查询syn反应很慢。要持续差不多10分钟。 其实这个syn中的数据只有200多条 第一反应是cpu 100%了,查看果然是 因为问题紧急,直接抓了一个ash报告,看到两个session占用了99.
604 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载