SVG的渐变效果、模糊效果

<h1>绘制文本:svg画布上不允许使用普通的HTML元素，eg:span,div.需要用svg自己的text</h1>
    <svg id="s14" width="500" height="400">
        <text font-size="50" alignment-baseline="before-edge" fill="transparent" stroke="#0f0">SVG 画布中的文本，用SVG的text元素</text>
    </svg>

</svg>

<h1>SVG上放图像,用SVG的元素：image,必须指定其宽高,x,y不是必须的用于调整图片在画布中的位置</h1>
<svg id="s15" width="800" height="800">
    <image xlink:href="image/1.jpg" width="200" height="300" x="10" y="10"></image>
    <img src="image/1.jpg">
</svg>
<h1>SVG中使用渐变对象—一种特效对象：defs(define effects)，定义的效果必须放在defs对象中,<br/>linearGradient线性渐变，radialGradient,必须有ID属性。用full(url(#idName))使用到任意一个SVG元素中<br/>stop-opacity设置这个范围内的透明度
</h1>
<svg id="s16" width="800" height="800" >
    <defs>
        <linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="17%" stop-color="red"></stop>
            <stop offset="34%" stop-color="orange"></stop>
            <stop offset="51%" stop-color="yellow"></stop>
            <stop offset="68%" stop-color="green"></stop>
            <stop offset="75%" stop-color="cyan"></stop>
            <stop offset="85%" stop-color="blue"></stop>
            <stop offset="100%" stop-color="purple"></stop>
        </linearGradient>
    </defs>
    <rect width="400" height="100" x="50" y="150" fill="url(#g3)" ></rect>
    <text font-size="100" x="50" alignment-baseline="before-edge" fill="url(#g3)">渐变效果</text>
</svg>

模糊效果，使用filter,了解就好

<h1>使用滤镜SVG,查看MDN中的教程</h1>
<svg id="s17" width="500" height="500">
    <defs>
        <filter id="f1">
            <feGaussianBlur stdDeviation="6"></feGaussianBlur>
        </filter>
    </defs>
    <text font-size="80" y="100" filter="url(#f1)">2018</text>
    <text font-size="80" y="200">2018</text>
    <text font-size="80" y="300">2018</text>
</svg>