svg绘图

<!DOCTYPE html>
<html>
<head>
<title>svg绘图</title>
<meta charset="utf-8"/>
</head>
<body>
<!--使用xmlns文件定义-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid red;">
<polyline points="10,10 60,60 110,10 160,80, 230,30" style="fill:none;stroke:black;" />
</svg>

<svg width="100%" height="300" style="border:1px solid red;">
<rect x="100" y="100" width="300" height="100" style="filter:url(#mylj);" stroke="red" stroke-width="4"/>
</svg>
<!--定义滤镜-->
<svg style="border:1px solid red;">
<defs>
<filter id="mylj">
<feGaussianBlur in="SourceGraphic" stdDeviation="8">
</filter>
</defs>
</svg>

<!--线性渐变-->
<svg width="100%" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;">

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>
<!--放射性渐变-->
<svg width="100%" height="300" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>


</svg>

<!--使用5s淡出的方块-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributetype="CSS" attributename="opacity" from="1" to="0" dur="5s" repeatcount="indefinite"></animate>
</rect>
</svg>
<!-- 椭圆形上绘字 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
</lineargradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
<!--矩形会变大并改变颜色 -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
<animate attributename="x" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"></animate>
<animate attributename="y" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"></animate>
<animate attributename="width" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"></animate>
<animate attributename="height" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"></animate>
<animatecolor attributename="fill" attributetype="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"></animatecolor>
</rect>
</svg>
<!-- 会改变颜色的三个矩形 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid red;">
<rect x="10" y="10" width="90" height="60">
<animate attributetype="CSS" attributename="fill" from="lime" to="red" dur="5s" repeatcount="indefinite"></animate>
</rect>

<rect x="10" y="90" width="90" height="60">
<animate attributetype="CSS" attributename="fill" from="lime" to="green" dur="5s" repeatcount="indefinite"></animate>
</rect>
<rect x="130" y="10" width="90" height="60">
<animate attributetype="CSS" attributename="fill" from="lime" to="pink" dur="5s" repeatcount="indefinite"></animate>
</rect>
</svg>
<!-- 沿一个运动路径移动的文本 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
<animatemotion path="M 0 0 L 100 100" dur="5s" fill="freeze"></animatemotion>
</text>
</g>
</svg>
<!-- 沿一个运动路径移动、旋转并缩放的文本 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
<set attributename="visibility" attributetype="CSS" to="visible" begin="1s" dur="5s" fill="freeze"></set>
<animatemotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"></animatemotion>
<animatetransform attributename="transform" attributetype="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"></animatetransform>
<animatetransform attributename="transform" attributetype="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"></animatetransform>
</text>
</g>
</svg>
<!-- 沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
<animate attributename="x" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"></animate>
<animate attributename="y" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"></animate>
<animate attributename="width" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"></animate>
<animate attributename="height" attributetype="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"></animate>
<animatecolor attributename="fill" attributetype="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"></animatecolor>
</rect>
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
<set attributename="visibility" attributetype="CSS" to="visible" begin="1s" dur="5s" fill="freeze"></set>
<animatemotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"></animatemotion>
<animatecolor attributename="fill" attributetype="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze"></animatecolor>
<animatetransform attributename="transform" attributetype="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"></animatetransform>
<animatetransform attributename="transform" attributetype="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"></animatetransform>
</text>
</g>
</svg>

<!--http://www.ziqiangxuetang.com/svg/svg-reference.html svg参考手册-->
</body>
</html>

 

posted @ 2015-12-05 18:08  studentNina  阅读(212)  评论(0)    收藏  举报