渐变的使用:
<svg width="400" height="300" viewBox="0 0 400 300">
<defs>
<linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#000"></stop>
<stop offset="50%" stop-color="#fff"></stop>
<stop offset="100%" stop-color="#000"></stop>
</linearGradient>
<radialGradient id="radial" cx="0%" cy="0%" r="100%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#000"></stop>
<stop offset="50%" stop-color="#fff"></stop>
<stop offset="100%" stop-color="#000"></stop>
</radialGradient>
</defs>
<rect x="0" y="0" width="100" height="80" rx="5" ry="5" fill="url(#linear)"></rect>
<rect x="50" y="50" width="100" height="80" rx="5" ry="5" fill="url(#radial)"></rect>
</svg>
笔刷的使用:
<svg width="400" height="300" viewBox="0 0 400 300">
<pattern id="pattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="50" rx="0" ry="0" stroke="red" fill="none"></rect>
</pattern>
<rect x="0" y="0" width="400" height="300" rx="0" ry="0" fill="url(#pattern)"></rect>
</svg>
加上patternUnits="userSpaceOnUse"可以让笔刷的尺寸基于世界坐标系
圆弧的绘制:
<svg width="400" height="300" viewBox="0 0 400 300">
<path d="M10,10 V100 A100,100,0,0,0,110,10 Z" stroke="red" fill="none"></path>
</svg>
3个0分别表示:旋转角0°、取小弧、逆时针方向
文本的使用:
<svg width="400" height="300" viewBox="0 0 400 300">
<text x="50" y="50" dx="20 40 60" dy="20 40 60" stroke="red" fill="green" font-size="30" font-family="Microsoft YaHei" base-line="top">你好啊</text>
</svg>
路径文本:
<svg width="400" height="300" viewBox="0 0 400 300">
<path id="textPath" d="M10,50 Q30,100 50,50 T80,70" stroke="red" fill="none"></path>
<text x="-30" dy="10">
<textPath xlink:href="#textPath">你好啊我很好谢谢</textPath>
</text>
</svg>
裁剪示例:
<svg width="100%" height="100%" viewbox="-100 -100 200 200">
<defs>
<clipPath id="clipPath">
<polygon points="0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"></polygon>
</clipPath>
</defs>
<circle cx="15" cy="0" r="20" clip-path="url(#clipPath)" fill="yellow"></circle>
</svg>
蒙板示例:
<svg width="400" height="300" viewBox="0 0 400 300">
<g id="shape">
<linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#fff"></stop>
<stop offset="70%" stop-color="#000"></stop>
</linearGradient>
<mask id="mask">
<circle cx="50" cy="50" r="20" fill="url(#linear)"></circle>
</mask>
<circle cx="50" cy="50" r="20" fill="yellow" mask="url(#mask)"></circle>
</g>
</svg>
被蒙板物体是根据亮度来显示的,越亮,显示的越清晰
基本动画:
<svg width="400" height="300" viewBox="0 0 400 300">
<rect x="0" y="0" width="100" height="80" rx="5" ry="5">
<animate id="animate" attributeType="XML" attributeName="fill" begin="0; animate2.end+1s" from="red" to="blue" dur="2s" fill="freeze"></animate>
<animate id="animate2" attributeType="XML" attributeName="x" begin="animate.end+1s" from="0" to="100" dur="2s" fill="freeze"></animate>
</rect>
</svg>
多个动画是可以同时进行的;repeatCount="indefinite"可以让动画永远进行下去。
变换动画: <svg width="400" height="300" viewBox="0 0 400 300">
<rect x="0" y="0" width="100" height="80" rx="5" ry="5">
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0" to="45" dur="2s" fill="freeze"></animateTransform>
</rect>
</svg>
路径动画:
<svg width="400" height="300" viewBox="0 0 400 300">
<rect x="0" y="0" width="30" height="40" rx="5" ry="5">
<animateMotion path="M0,0 L20,100 L80,100 Z" rotate="auto" dur="2s" fill="freeze"></animateMotion>
</rect>
<path d="M0,0 L20,100 L80,100 Z" stroke="red" fill="none"></path>
</svg>
动画响应事件:
<svg width="400" height="300" viewBox="0 0 400 300">
<circle id="circle" cx="50" cy="50" r="20"></circle>
<rect x="0" y="0" width="30" height="30" rx="5" ry="5">
<animate id="animate1" attributeName="x" begin="circle.mouseover; accesskey(s)" end="circle.mouseout" from="50" by="100" dur="2s" repeatCount="indefinite" repeatDur="5"></animate>
<animate id="animate2" attributeName="fill" begin="animate1.repeat(2)" from="red" to="blue" dur="2s"></animate>
</rect>
</svg>
accesskey(s) 不兼容chrome