<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>