SVG的漸變效果、模糊效果
阿新 • • 發佈:2019-01-09
<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>