SVG 填充

上色

属性 说明
fill 填充颜色(颜色名、rgb/rgba值、十六进制值等)
fill-opacity 透明度,值的范围是 0~1

实例

<svg version="1.1" height="70" width="500" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="60" fill="green"  fill-opacity="0.8"/>
    <rect x="110" y="0" width="100" height="60" fill="blue" fill-opacity="0.8"/>
    <rect x="220" y="0" width="100" height="60" fill="red"/>
    <rect x="330" y="0" width="100" height="60"  fill="rgba(125,111,0,0.5)"/>
</svg>

效果:

描边

属性 说明
stroke 绘制线条的颜色(颜色名、rgb/rgba值、十六进制值等)
stroke-width 描边宽度
stroke-opacity 透明度,值的范围是 0~1
stroke-linecap 不同类型的路径末端终结(butt:默认值,平直的边缘、round:圆形线帽、square:正方形线帽)
stroke-linejoin 两个线段连接起来的样式(miter:尖角连接、round:圆角连接 bevel:斜接)
stroke-dasharray 线段样式,奇数项是填充单位,偶数项是空白单位,数字必须用逗号分割
stroke-dashoffset 线段开始的偏移量
<svg version="1.1" height="300"  width="500" xmlns="http://www.w3.org/2000/svg">
    <line stroke="green" stroke-width="10" stroke-linecap="butt" x1="20" y1="20" x2="400" y2="20" />
    <line stroke="blue" stroke-width="15" stroke-linecap="round" x1="20" y1="60" x2="400" y2="60" />
    <line stroke="red" stroke-width="20" stroke-linecap="square" x1="20" y1="100" x2="400" y2="100" />
    <line stroke="black" stroke-width="10" stroke-dasharray="20,10" x1="20" y1="130" x2="400" y2="130" />
    <line stroke="black" stroke-width="10" stroke-dasharray="20,10" stroke-dashoffset="5" x1="20" y1="150" x2="400" y2="150" />
    <line stroke="black" stroke-width="10" stroke-dasharray="10,6,8,10,5,4" x1="20" y1="170" x2="400" y2="170" />
    <polyline stroke="green" stroke-width="20" stroke-linecap="butt"
              fill="none"
              stroke-linejoin="miter" points="40 280 80 210 120 280"/>
    <polyline stroke="blue" stroke-width="20"
              stroke-linecap="round" fill="none"
              stroke-linejoin="round" points="160 280 200 210 240 280" />
    <polyline stroke="red" stroke-width="20"
              stroke-linecap="square" fill="none"
              stroke-linejoin="bevel" points="280 280 320 210 360 280" />
</svg>

效果:

使用 CSS
SVG 规范 将属性区分成 properties 和其他 attributes,只有 properties 可以通过 CSS 设置,参考
上色和填充的部分一般是可以用 CSS 来设置的,比如 fill,stroke,stroke-dasharray 等。

用法1:设置 style 属性:

<line x1="10" y1="10" x2="140" y2="120" style="stroke:#4faa2a;stroke-width:4" />

用法2:和 HTML 一样使用 style 代码片段或者外部 CSS 文件:

<style>
#MyLine {
  stroke-width:4;
  stroke:#4faa2a;
}
</style>
<line x1="10" y1="10" x2="140" y2="120" id="MyLine" />

引用外部 CSS 文件

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect height="10" width="10" id="MyRect"/>
</svg>

CSS 文件内容

#MyLine {
  stroke-width:4;
  stroke:#4faa2a;
}

用法3:使用 <defs> 定义,这里面可以定义一些不会在 SVG 图形中出现、但是可以被其他元素使用的元素
然后把 <style> 则放在 <defs> 标签里。

<svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css"><![CDATA[
         #MyLine {
 	     stroke-width:4;
    	 stroke:#4faa2a;
	  }
    ]]></style>
    </defs>
    <line x1="10" y1="10" x2="140" y2="120" id="MyLine"/>
</svg>

效果:

渐变

有两种类型的渐变:线性渐变和径向渐变。

渐变色元素需要定义在 <defs> 标签内部,而不是定义在形状上面;
渐变色元素设置 id 值,否则的话,别的元素无法使用这个渐变色。

线性渐变
使用 <linearGradient> 元素创建线性渐变,属性(x1,y1)到 属性(x2,y2)的连线是线性渐变的径向;
子标签 <stop> 是渐变梯度点,它有下面的属性

属性 说明
stop-opacity 透明度(0~1)
stop-color 颜色值
offset 结点位置的偏移值,始终从0%开始 (0%~100%,或者 0~1);如果位置有重合,将使用 XML 树中较晚设置的值

实例

<svg width="300" height="130" 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="green"/>
            <stop offset="100%" stop-color="red"/>
        </linearGradient>
        <linearGradient id="Gradient3" x1="0" y1="0" x2="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
        <style type="text/css"><![CDATA[
            #rect1 { fill: url(#Gradient1); }
            .stop1 { stop-color: green; }
            .stop2 { stop-color: blue; stop-opacity: 0.5; }
            .stop3 { stop-color: red; }
      ]]></style>
    </defs>
    <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
    <rect x="130" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/>
</svg>

效果:

使用 xlink:href 属性引用渐变,属性和颜色中值(stop)可以被另一个渐变包含引用,Gradient1 颜色中值(stop)可以全部引用;

<linearGradient id="Gradient1">
     <stop class="stop1" offset="0%"/>
     <stop class="stop2" offset="50%"/>
     <stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient3" xmlns:xlink="http://www.w3.org/1999/xlink" x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/>

径向渐变
使用 元素 向渐变与线性渐变相似,只是它是从一个点开始发散绘制渐变。

属性 说明
cx,cy 渐变结束所围绕的圆环的中心点
r 渐变结束所围绕的圆环的中心点的半径
fx,fy 焦点,描述了渐变的中心
spreadMethod pad:默认值,渐变到达终点时,最终的偏移颜色被用于填充对象剩下的空间;reflect:渐变一直持续下去,效果是与渐变本身是相反的,以100%偏移位置的颜色开始,逐渐偏移到0%位置的颜色,然后再回到100%偏移位置的颜色;repeat:渐变一直持续下去,但是它不会像reflect那样反向渐变,而是跳回到最初的颜色然后继续渐变;
gradientUnits 渐变单位属性:objectBoundingBox:默认值,对象包围盒子坐标,取值范围是0到1。如cx,cy的坐标值是(0.25,0.25)则圆心在包围盒的左上角1/4处,半径r=0.25意味着半径长是包围盒长的1/4;userSpaceOnUse:使用绝对坐标,渐变色和填充的对象使用相同的坐标值,参考下面 userSpaceOnUse 例子

子标签 是渐变梯度点,它有下面的属性

属性 说明
stop-opacity 透明度(0~1)
stop-color 颜色值
offset 结点位置的偏移值,始终从0%开始 (0%~100%,或者 0~1);如果位置有重合,将使用 XML 树中较晚设置的值

实例:

<svg width="500" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="GradientDefault">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient id="GradientFocus" cx="0.5" cy="0.5" r="0.3" fx="0.6" fy="0.6">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient id="GradientNoFocus" cx="0.3" cy="0.3" r="0.3">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient id="GradientPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                        spreadMethod="pad">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient id="GradientReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                        spreadMethod="reflect">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient id="GradientRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                        spreadMethod="repeat">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient
                xmlns:xlink="http://www.w3.org/1999/xlink"
                xlink:href="#GradientDefault"
                id="gradientObjectBoundingBox"
                gradientUnits="objectBoundingBox"
                cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
        <radialGradient id="gradientUserSpaceOnUse" gradientUnits="userSpaceOnUse"
                        cx="170" cy="280" r="50">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="100%" stop-color="green"/>
        </radialGradient>
    </defs>
    <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientDefault)"/>
    <rect x="120" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientFocus)"/>
    <rect x="230" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientNoFocus)"/>
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
    <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
    <rect x="230" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
    <rect x="10" y="230" rx="15" ry="15" width="100" height="100" fill="url(#gradientObjectBoundingBox)"/>
    <rect x="120" y="230" rx="15" ry="15" width="100" height="100" fill="url(#gradientUserSpaceOnUse)"/>
    <text x="30" y="40" fill="white" font-family="sans-serif" font-size="12pt">Default</text>
    <text x="160" y="40" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
    <text x="180" y="90" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
    <text x="250" y="80" fill="white" font-family="sans-serif" font-size="12pt">No focus</text>
    <text x="40" y="180" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
    <text x="140" y="180" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
    <text x="250" y="180" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
    <text x="15" y="250" fill="white" font-family="sans-serif" font-size="8pt">objectBoundingBox</text>
    <text x="130" y="250" fill="white" font-family="sans-serif" font-size="8pt">userSpaceOnUse</text>
</svg>

效果:

图案

SVG 也可以使用 patterns(图案)作为填充类型,它的功能非常强大,<pattern> 需要放在SVG文档的 <defs> 内部。

属性 说明
width 图案的宽度,默认范围 0~1
height 图案的高度,默认范围 0~1
x,y 绘图的开始点,默认(0,0)
patternUnits 属性的坐标单位,objectBoundingBox:默认值,范围是 0~1,假如(x=0.25,y=0.25),这一位置图案的宽高仅为总外框大小的 1/4; userSpaceOnUse:使用绝对坐标,渐变色和图案的对象使用相同坐标值
patternContentUnits 元素基于基本形状使用的单元系统,默认值 userSpaceOnUse,与 patternUnits 默认使用坐标系相反;假如填充区域是一个长宽都是200正方形,填充图案水平和垂直重复4次,每个图案内容按照长宽都是50来绘图,里面的内容不会自动缩放,内容周围用空白填充

实例:

patternUnits patternContentUnits 效果图
objectBoundingBox userSpaceOnUse 左一,图案宽高各0.25,区域填满
objectBoundingBox userSpaceOnUse 左二,图案宽高各0.25,内容没有拉伸,区域高度拉长留空白
userSpaceOnUse userSpaceOnUse 右一,图案宽高各50,内容没有拉伸,区域填满不留空白
userSpaceOnUse objectBoundingBox 右二,图案宽高各0.25,内容拉伸,区域填满不留空白
<svg version="1.1" width="900"  xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="Gradient1">
            <stop offset="30%" stop-color="#4faa2a"/>
            <stop offset="80%" stop-color="green"/>
        </linearGradient>
        <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="5%" stop-color="red"/>
            <stop offset="95%" stop-color="orange"/>
        </linearGradient>
        <pattern id="patternDefault" x="0" y="0" width=".25" height=".25">
            <rect x="0" y="0" width="50" height="50" fill="white"/>
            <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>
        <pattern id="patternUserSpaceOnUse" x="0" y="0" width="50" height="50"
                 patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="50" height="50" fill="white"/>
            <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>
        <pattern id="patternContentUnitsObjectBoundingBox" x="0" y="0" width=".25" height=".25"
                 patternContentUnits="objectBoundingBox">
            <rect x="0" y="0" width=".25" height=".25" fill="white"/>
            <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>
    </defs>
    <rect fill="url(#patternDefault)" stroke="#4faa2a" x="0" y="0" width="200" height="200"/>
    <rect fill="url(#patternDefault)" stroke="#4faa2a" x="220" y="0" width="200" height="250"/>
    <rect fill="url(#patternUserSpaceOnUse)" stroke="#4faa2a" x="440" y="0" width="200" height="250"/>
    <rect fill="url(#patternContentUnitsObjectBoundingBox)" stroke="#4faa2a" x="660" y="0" width="200" height="250"/>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注