<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
body{width:100%; height:100%;}
svg{width:600px; height:600px; border:1px solid black;}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--矩形-->
<rect x="20" y="20" rx="10" ry="10" width="100" height="100" style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0); fill-opacity:0.1;" />
<!--圆形-->
<circle cx="200" cy="100" r="20" stroke="black" stroke-width="2" fill="red" />
<!--椭圆-->
<ellipse cx="300" cy="100" rx="40" ry="20" stroke="black" fill="yellow" />
<!--直线-->
<line x1="20" y1="150" x2="50" y2="200" stroke="blue" />
<!--多边形-->
<polygon points="100,150,150,250,80,230" stroke="red" fill="green" />
<!--五角星-->
<polygon points="500,10 440,180 590,60 410,60 560,180" stroke="blue" fill="red" fill-rule="evenodd" />
<!--直线连接-->
<polyline points="20,300 80,300 80,350 140,350 140,400" stroke="black" fill="none" />
<!--文字-->
<text x="30" y="500" fill="red" transform="rotate(30 30,500)">hello world</text>
<!--虚线-->
<g fill="none" stroke="black" stroke-width="3">
<path stroke-linecap="round" stroke-dasharray="5,5" d="M250 300 l200 0" />
</g>
<!--模糊-->
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="90" height="90" x="250" y="400" fill="green" filter="url(#f1)" />
</svg>
</body>
</html>
效果：
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
body{width:100%; height:100%;}
svg{width:600px; height:600px; border:1px solid black;}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--矩形-->
<rect x="20" y="20" rx="10" ry="10" width="100" height="100" style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0); fill-opacity:0.1;" />
<!--圆形-->
<circle cx="200" cy="100" r="20" stroke="black" stroke-width="2" fill="red" />
<!--椭圆-->
<ellipse cx="300" cy="100" rx="40" ry="20" stroke="black" fill="yellow" />
<!--直线-->
<line x1="20" y1="150" x2="50" y2="200" stroke="blue" />
<!--多边形-->
<polygon points="100,150,150,250,80,230" stroke="red" fill="green" />
<!--五角星-->
<polygon points="500,10 440,180 590,60 410,60 560,180" stroke="blue" fill="red" fill-rule="evenodd" />
<!--直线连接-->
<polyline points="20,300 80,300 80,350 140,350 140,400" stroke="black" fill="none" />
<!--文字-->
<text x="30" y="500" fill="red" transform="rotate(30 30,500)">hello world</text>
<!--虚线-->
<g fill="none" stroke="black" stroke-width="3">
<path stroke-linecap="round" stroke-dasharray="5,5" d="M250 300 l200 0" />
</g>
<!--模糊-->
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="90" height="90" x="250" y="400" fill="green" filter="url(#f1)" />
</svg>
</body>
</html>
效果：
扫一扫
5065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
