SVG—初识2之线性渐变与放射性渐变

SVG渐变

SVG 线性渐变 - <linearGradient>

<linearGradient>标签必须嵌套在 的内部。 标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变：

• 当y1和y2相等，而x1和x2不同时，可创建水平渐变
• 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
• 当x1和x2不同，且y1和y2不同时，可创建角形渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y1="0%">
            <stop offset="0%" style="stop-color: red;stop-opacity: 1" />
            <stop offset="15%" style="stop-color: orange;stop-opacity: 1" />
            <stop offset="25%" style="stop-color: yellow; stop-opacity: 1" />
            <stop offset="50%" style="stop-color: greenyellow; stop-opacity: 1" />
            <stop offset="75%" style="stop-color: skyblue;stop-opacity: 1" />
            <stop offset="100%" style="stop-color: mediumpurple;stop-opacity: 1" />
        </linearGradient>
    </defs>
    <ellipse rx="100" ry="50" cx="100" cy="50" fill="url(#grad1)"/>
</svg>

• <linearGradient>标签的id属性可为渐变定义一个唯一的名称
• <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 标签来规定。offset属性用来定义渐变的开始和结束位置。
• 填充属性把 ellipse 元素链接到此渐变

渐变加阴影

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: red;stop-opacity: 1;" />
            <stop offset="20%" style="stop-color: orange;stop-opacity: 1;" />
            <stop offset="25%" style="stop-color: yellow;stop-opacity: 1;" />
            <stop offset="50%" style="stop-color: greenyellow;stop-opacity: 1;" />
            <stop offset="75%" style="stop-color: deepskyblue;stop-opacity: 1;" />
            <stop offset="100%" style="stop-color: purple;stop-color: 1;" />
        </linearGradient>
    </defs>
    <defs>
        <filter id="f1" x="0" y="0">
            <feOffset in="SourceGraphic" dx="20" dy="20" result="offOut" />
            <feColorMatrix type="matrix" in="offOut" result="matrixOut"
                           values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
            <feGaussianBlur in="matrixOut" result="gauOut" stdDeviation="6" />
            <feBlend in="SourceGraphic" in2="gauOut" mode="normal" />
        </filter>
    </defs>
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#grad2)" filter="url(#f1)"/>
</svg>

加上文字

<svg>
     <defs>
       <linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color: red;stop-opacity:1;" />
        <stop offset="50%" style="stop-color: orange;stop-opacity: 1;" />
         <stop offset="100%" style="stop-color: yellow;stop-opacity: 1;" />
       </linearGradient>
     </defs>
     <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#lg1)"/>
     <text x="30" y="60" fill="#fff" font-size="45" font-family="Verdana">渐变色</text>
   </svg>

• <text> 元素是用来添加一个文本

SVG 放射性渐变 - <radialGradient>

• <radialGradient>元素用于定义放射性渐变。
• <radialGradient>标签必须嵌套在 的内部。 标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

<svg>
     <defs>
       <radialGradient id="rg" cx="50%" cy="50%" fx="50%" fy="50%" r="50%">
         <stop offset="0%" style="stop-color: rgb(255,255,255);stop-opacity: 0;" />
         <stop offset="50%" style="stop-color: yellow;stop-opacity: 0;" />
         <stop offset="75%" style="stop-color: greenyellow;stop-opacity:1;" />
         <stop offset="100%" style="stop-color: blue;stop-opacity: 1;" />
       </radialGradient> 
     </defs>
     <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#rg)" />
   </svg>

• <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
• CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
• 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个 标签指定。offset属性用来定义渐变色开始和结束
• 填充属性把ellipse元素链接到此渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>