搜索
首页web前端H5教程HTML5之SVG 2D入门5—颜色的表示及定义方式_html5教程技巧

SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。
基本有下面这些定义颜色的方式
1. 颜色名字: 直接使用颜色名字red, blue, black...
2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgba(255,100,100,0.5)。
3. 十六进制值: 用十六进制定义的颜色,例如#ffffff。
4. 渐变值:这个也与canvas中一样,支持两种渐变色:线性渐变,环形渐变。如下图所示:

5. 图案填充:使用自定义的图案作为填充色。

前面几种都很简单,重点看下后面两种填充色。 

线性渐变
使用linearGradient元素即可定义线性渐变,每一个渐变色成分使用stop元素定义。看下面的例子:

复制代码
代码如下:



















  
在这个例子中,我们需要注意
1. 渐变色元素必须要放到defs元素中;
2. 需要给渐变色元素设置id值,否则的话,别的元素无法使用这个渐变色。
3. 渐变色的成员使用stop定义,它的属性也可以使用CSS定义;它支持class,id这种标准HTML都支持的属性。其它常用属性如下
offset属性:这个定义了该成员色的作用范围,该属性取值从0%到100%(或者是0到1);通常第一种颜色都是设置成0%,最后一种设置成100%。
stop-color属性:这个很简单,定义了该成员色的颜色。
stop-opacity属性:定义了成员色的透明度。
x1,y1,x2,y2属性:这两个点定义了渐变的方向,默认不写的话是水平渐变,上面例子中同时也创建了一个垂直渐变。
4. 渐变色的使用,如例子中所示,直接用url(#id)的形式赋值给fill或者stroke就可以了。
5. 渐变色成员的复用:你也可以使用xlink:href引用定义过的渐变色成员,所以上面的例子也可以改写如下: 

复制代码
代码如下:








环形渐变
使用radialGradient元素定义环形渐变,还是使用stop定义成员色。看例子: 

复制代码
代码如下:

















从上面的例子看到,除了元素名字和一些特别的成员,其他的所有都和线性渐变一样,包括stop的定义,必须放到defs中,必须给它设置id,使用url(#id)去赋值等。这些特别的成员如下:
offset属性:这个和线性渐变的值是一样,但是含义不一样。在环形渐变中,0%代表圆心处,这个很好理解。
cx,cy,r属性:其实也很好理解,环形渐变,当然要定义环的圆心和半径了,体会一下上面例子中圆的大小和位置就能理解了。
fx,fy属性:定义颜色中心(焦点)处的位置,也就是渐变色最浓处的坐标,在上面例子中,红色最红的是圆心,这是默认效果;如果想改变一下,就可以设置fx,fy坐标值。
不过这里需要注意一下上面cx,cy,r,fx,fy的值,你会发现它们都是小数,那么单位是什么呢?
这个需要先了解另外一个相关的属性:gradientUnits,它定义了定义渐变色使用的坐标单位。这个属性有2个可用值:userSpaceOnUse和objectBoundingBox。

objectBoundingBox是默认值,它使用的坐标都是相对于对象包围盒的(方形包围盒,不是方形包围盒的情况比较复杂,略过),取值范围是0到1。例如上例中的cx,cy的坐标值(0.25,0.25)。意味着这个圆心是在包围盒的左上角1/4处,半径0.25意味着半径长是对象方形包围盒长的1/4,就像你们图中看到的那样。
userSpaceOnUse表示使用的是绝对坐标,使用这个设置的时候,你必须要保证渐变色和填充的对象要保持在一个位置。
再看下面这个例子,注意gradientUnits属性默认值是objectBoundingBox:

复制代码
代码如下:



cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">





fill="url(#Gradient5)" stroke="black" stroke-width="2"/>



(fx,fy)
(cx,cy)


看效果图就知道"焦点"的含义了。

此外,还有渐变色元素还有一些变换的属性,如gradientTransform,这个不是这里的重点,后面会总结变换。
另外一个可能用到的属性是spreadMethod属性,这个属性定义了渐变色到达它的终点时应该采取的行为。该属性有3个可选值:pad(默认值),reflect,repeat。pad不用说了,属于自然过渡,渐变色结束以后,使用最后一个成员色直接渲染对象剩下的部分。refect会让渐变色继续,只不过渐变色会反向继续渲染,从最后一个颜色开始到第一个颜色这个顺序渲染;等到再次到达渐变色终点时,再反序,如此这般指导对象填充完毕。repeat也会让渐变色继续渲染,但是不会反序,还是一遍一遍从第一种颜色到最后一种颜色渲染。效果图如下所示:

看一段重复渲染的代码: 

复制代码
代码如下:



cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
spreadMethod="repeat">




fill="url(#Gradient)"/>

纹理填充
纹理填充也是一种流行的填充方式,在SVG中,可以使用pattern创建一个纹理,然后用这个pattern去填充别的对象。直接看例子:

复制代码
代码如下:






















例子看起来很简单,由渐变色创建pattern,然后使用pattern

填充矩形。这里需要注意:
1. 不同的浏览器填充这个pattern的时候效果不一样。

比如例子在FireFix和Chrome中效果一样。但是如果你把渐变色

和pattern定义在同一个defs组合里,则FireFox仍然能正常渲染,

但是Chrome就识别不了渐变色,只会用默认的黑色填充。
2. pattern也需要定义id。
3. pattern也必须要定义在defs中。
4. pattern的使用也是把url(#id)直接赋值给fill或stroke。

上面这些都是很简单的,我们重点看一下例子中的坐标表示情况,坐标在pattern中比较复杂。
pattern中包含两个相关属性:patternUnits和patternContentUnits属性;这两个属性的取值都还是只有2个:objectBoundingBox和userSpaceOnUse,这两个值的含义上面以及讲过了。这里容易混淆的是这两个属性的默认值不同,但是当你理解这么做的原因以后,你又会发现这么做还真是有道理。
1. patternUnits属性
这个属性与Gradient的gradientUnits属性是一样的,默认采用objectBoundingBox。受这个属性影响的属性有x,y,width,height,这4个属性分别定义了pattern的起点,宽高度。它们都采用了相对值,例子中想要在水平和竖直方向上都填充4次,所以width和height都设为了0.25。
2. patternContentUnits属性
这个属性的默认值正好相反,采用userSpaceOnUse。这个属性描述了pattern中绘制的形状(比如上面的rect,circle)的坐标系统。也就是说在默认情况下,你在pattern中绘制的形状和pattern自身的大小/位置使用了不一样的坐标系。考虑上面例子中的情况,我们想填充一个200*200的矩形,而且每个方向重复4次。这就意味着每个pattern是50*50的,那么pattern里面的两个矩形和一个圆形就是画在这个50*50的矩形中。这样我们就能理解上面pattern中的矩形和圆的坐标了。此外,这个例子中的pattern为了居中,需要偏移10px后开始渲染,而这个值是受patternUnits属性制约的,所以默认情况下,x,y值就为:10/200=0.05。
   那么pattern为什么要这么设置两个属性的默认值呢?

这是由用户的使用决定的(以上面的例子来讨论):
第一种pattern样式:我想这是大多数情况,所以处理成默认值:pattern是会随着外面的图形缩放而被拉伸,不管外围方形是多大,pattern始终在两个方向上都会被填充4次。但是pattern中包含的图形是不会随着外面被填充的方形缩放而进行拉伸的。虽然比较牵强,但就这么理解吧。
第二种pattern样式:pattern中的形状也随着外围的形状缩放进行拉伸。我们可以显示的把patternContentUnits属性的值也设为objectBoundingBox达到这个效果。例如把pattern的部分修改如下:

复制代码
代码如下:







修改后,当改变被填充的矩形的大小时,pattern中的形状也会进行拉伸。而且修改后改成了相对外围对象的坐标,所以不再需要pattern的x和y坐标了,pattern会始终调整以适合被填充的形状。
第三种pattern的样式:pattern的形状和大小都是固定了,不管外围对象怎么缩放,你可以把坐标系统都改成userSpaceOnUse实现这个效果。代码如下: 

复制代码
代码如下:







这3中典型的pattern如下图所示:

 HTML5之SVG 2D入门5—颜色的表示及定义方式_html5教程技巧

实用参考:

官方文档:http://www.w3.org/TR/SVG11/
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何在 Windows 11 上更改标题栏颜色?如何在 Windows 11 上更改标题栏颜色?Sep 14, 2023 pm 03:33 PM

默认情况下,Windows11上的标题栏颜色取决于您选择的深色/浅色主题。但是,您可以将其更改为所需的任何颜色。在本指南中,我们将讨论三种方法的分步说明,以更改它并个性化您的桌面体验,使其具有视觉吸引力。是否可以更改活动和非活动窗口的标题栏颜色?是的,您可以使用“设置”应用更改活动窗口的标题栏颜色,也可以使用注册表编辑器更改非活动窗口的标题栏颜色。若要了解这些步骤,请转到下一部分。如何在Windows11中更改标题栏的颜色?1.使用“设置”应用按+打开设置窗口。WindowsI前往“个性化”,然

如何在 Windows 11 上反转颜色 [使用快捷方式]如何在 Windows 11 上反转颜色 [使用快捷方式]Apr 14, 2023 pm 02:43 PM

使用 Windows 电脑时,可能需要反转电脑的颜色。这可能是由于个人偏好或显示驱动程序错误造成的。如果你想要反转 Windows 11 电脑的颜色,本文为你提供了在 Windows 电脑上反转颜色所需的所有必要步骤。在本文中反转图像上的颜色是什么意思?简单来说,反转图像的颜色意味着将图像的当前颜色翻转到色轮上的相反色调。你也可以说这意味着将图像的颜色更改为负片。例如,蓝色图像将反转为橙色,黑色变为白色,绿色变为洋红色等。如何在 Windows 11 上反转颜色?1. 使用微软画图按键 + ,输

天然钛:揭秘iPhone 15 Pro的真实颜色天然钛:揭秘iPhone 15 Pro的真实颜色Sep 18, 2023 pm 02:13 PM

随着一年一度的Wanderlust活动的结束,苹果终于平息了长达数月的关于其iPhone15阵容的谣言和猜测。正如预期的那样,其2023年的旗舰“Pro”型号在原始动力以及新的“钛”设计和美学方面与众不同。以下是新款iPhone15Pro型号的不同颜色,并确定“天然钛”变体的真实颜色和色调。苹果手机15专业版颜色苹果选择了5级钛合金作为最新iPhone15Pro型号的材料设计。iPhone15Pro上使用的钛合金以其强度重量比而闻名,不仅使其更加耐用和轻便,而且还赋予该设备优雅的“刷子”质地,这

win10电脑护眼颜色怎么设置应用的详细教程win10电脑护眼颜色怎么设置应用的详细教程Jul 08, 2023 am 10:46 AM

对于办公一族来说,面对电脑办公就是一整天,多数软件背景色都是纯白,看的时间长了,眼睛就会感到干涩,难受。其实,我们可以自定义调节一下窗口护眼色,网上介绍的方法操作起来比较麻烦,本文小编和大家分享一招win10调整窗口护眼色的方法。快来看看电脑护眼模式怎么设置的方法吧。1、首先在键盘上按下组合键【win】+【R】打开运行窗口输入【regedit】点击确定打开。2、然后依次展开注册表文件夹:【\HKEY_CURRENT_USER\ControlPanel\Colors】3、然后在Colors文件夹中

聊聊如何利用 SVG 实现图片马赛克效果聊聊如何利用 SVG 实现图片马赛克效果Sep 01, 2022 am 11:05 AM

不借助 Javascript,如何利用 SVG 实现图片马赛克效果?下面本篇文章就来带大家详细了解一下,希望对大家有所帮助!

WPS文档表格颜色怎么设置你知道吗WPS文档表格颜色怎么设置你知道吗Mar 20, 2024 am 08:19 AM

我们在看到别人的WPS文档中表格颜色做出来的效果五颜六色,十分美观;而自己只有单调的黑色。如果过给表格填充颜色,我相信很多同学都会。但是,如果要在WPS文档中国设置表格的颜色的话,肯定有不少同学会觉得烧脑!今天,我们来学习一下关于如何设置WPS文档表格的颜色。我整理了一份文档,希望对大家有所帮助。步骤如下:1、我们需要在WPS文档中绘制一个表格,在要修改线条颜色的表格中点击鼠标右键。2、接着,用鼠标在表格上点击【鼠标右键】;在弹出的菜单中,我们找到【边框和底纹】。3、此时,会打开【边框和底纹】对

如何更改Windows 10任务栏的颜色如何更改Windows 10任务栏的颜色Jan 01, 2024 pm 09:05 PM

win10任务栏颜色修改起来非常简单,但是很多用户发现设置不了,其实非常的简单,只要在电脑的个性化里选择自己喜爱的颜色就可以了,要是改变不了颜色的注意详细的设置哦。win10任务栏颜色怎么改第一步:右键桌面——点击个性化第二步:颜色区域自定义第三步:选择喜欢的颜色PS:如果你无法改变颜色,可以点击颜色->选择颜色->自定义->默认windows模式,选择深色即可。

如何解决Win7显示器颜色异常问题如何解决Win7显示器颜色异常问题Jan 14, 2024 pm 06:54 PM

我们知道电脑使用久了就会出现各种各样的问题,其中最常见的就是显示器问题了,不少用户就曾遇到过显示器颜色不正常,那么当你也遇到Win7显示器颜色不正常怎么办,具体来看看解决方法吧。Win7显示器颜色不正常怎么办:常见的显示器故障现象如下:1、开机无显示、显示器经常不加电。2、显示器屏幕上的字符显示比较模糊。3、显示器有色斑。4、显示器出现波浪状的彩色条纹。5、显示器有异味。6、从显示器发出连续的“啪啪”声。7、在某种应用或配置下花屏、发暗(甚至黑屏)、重影、死机等。8、显示器缺色、散焦、屏幕过亮或

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版