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