• 售前

  • 售后

热门帖子
入门百科

HTML5之SVG 2D入门5—颜色的体现及界说方式

[复制链接]
恋爱的棉被缀 显示全部楼层 发表于 2021-10-25 19:04:19 |阅读模式 打印 上一主题 下一主题
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元素界说。看下面的例子:

复制代码代码如下:
<svg width="120" height="240">  
<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>
  
在这个例子中,我们必要注意
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引用界说过的渐变色成员,以是上面的例子也可以改写如下:

复制代码代码如下:
<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" xlink:href="#Gradient1"/>

环形渐变使用radialGradient元素界说环形渐变,照旧使用stop界说成员色。看例子:

复制代码代码如下:
<svg width="120" height="240">
  <defs>
      <radialGradient id="Gradient3">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="Gradient4" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>

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

从上面的例子看到,除了元素名字和一些特别的成员,其他的所有都和线性渐变一样,包罗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:

复制代码代码如下:
<svg width="120" height="120">
  <defs>
      <radialGradient id="Gradient5"
            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>

  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
        fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>



看效果图就知道"焦点"的含义了。
别的,另有渐变色元素另有一些变更的属性,如gradientTransform,这个不是这里的重点,背面会总结变更。
别的一个大概用到的属性是spreadMethod属性,这个属性界说了渐变色到达它的尽头时应该接纳的行为。该属性有3个可选值:pad(默认值),reflect,repeat。pad不消说了,属于自然过渡,渐变色结束以后,使用最后一个成员色直接渲染对象剩下的部分。refect会让渐变色继承,只不过渐变色会反向继承渲染,从最后一个颜色开始到第一个颜色这个序次渲染;比及再次到达渐变色尽头时,再反序,云云这般引导对象添补完毕。repeat也会让渐变色继承渲染,但是不会反序,照旧一遍一遍从第一种颜色到最后一种颜色渲染。效果图如下所示:

看一段重复渲染的代码:

复制代码代码如下:
<svg width="220" height="220">
  <defs>
      <radialGradient id="Gradient"
            cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
            spreadMethod="repeat">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>
  <rect x="50" y="50" rx="15" ry="15" width="100" height="100"
       fill="url(#Gradient)"/>
</svg>

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

复制代码代码如下:
<svg width="200" height="200">
  <defs>
    <linearGradient id="Gradient6">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
    <linearGradient id="Gradient7" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="orange"/>
    </linearGradient>
  </defs>
  <defs>
    <pattern id="Pattern" x=".05" y=".05" width=".25" height=".25">
      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient7)"/>
      <circle cx="25" cy="25" r="20" fill="url(#Gradient6)" fill-opacity="0.5"/>
    </pattern>
  </defs>
  
  <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
</svg>


例子看起来很简朴,由渐变色创建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 id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>

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

复制代码代码如下:
<pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>

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

实用参考:
官方文档: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/

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作