SVG图形绘制实例-优快云博客

本文链接：https://blog.youkuaiyun.com/a197p/article/details/78426158
<!DOCTYPE html>
<html>
<style>
.linestyle{
	stroke: red;
	stroke-width: 2;
}
</style>

	<head>
		<title >you</title>
	</head>

	<body>
		<svg width="600" height="600" version="1.1"
			xmlns="http://www.w3.org/2000/svg">
			
			<rect x="20" y="20" width="200" height="100"
			style=" fill:steelblue; stroke:blue; stroke-width:4;
			opacity:0.5" />
			
			<rect x="250" y="20" rx="20" ry="30" width="200" height="100"
			
				style="fill:yellow; stroke:black; stroke-width:4; 
				opacity:0.5"
			/>
			
			<circle cx="150" cy="210" r="80"
				style="fill:yellow; stroke:black; stroke-width:4"
			/>
			<ellipse cx="350" cy="210" rx="110" ry="80"
			style="fill:#33FF33; stroke:blue; stroke-width:4" />
			<line x1="20" y1="20" x2="600" y2="300"
			style="stroke: black; stroke-width:4" />
			<polygon points="100,20 20,90 60,160, 140,160 180,90"
			style="fill:LawnGreen; stroke:black; stroke-width:3" />
			<polyline points="100,20 20,90 60,160 140,160 180,90"
			style="fill:white; stroke:black; stroke-width:3 "
			transform="translate(200,0)" />
			<path d="M30,100 L270,300
				M30,100 H270
				M30,100 V300"
				style="stroke:black; stroke-width:3 "/>
				
			<path d="M30,100 C100,20 190,20 270,100
			S400,180 450,100"
			style="fill:white; stroke:black; stroke-width:3" />
			<path d="M30,100 Q190,20 270,100
				T450,100"
				style="fill:white; stroke:black; stroke-width:3"/>
			<path d="M100,200 a200,150 0 1,0 150,-150 Z"
			fill="yellow" stroke="blue" stroke-width="4" />
			<text x="200" y="150" dx="-5" dy="5" rotate="180"
			textLength="90">IFKY</text>
			<text x="200" y="150" dx="-5" dy="5" textLength="90"
			>IFKY<tspan fill="red">OU</tspan> </text>
			<line class="linestyle" x1="10" y1="10" x2="100" y2="100" />
			<defs>
			<marker id="arrow"
			markerUnits="strokeWidth"
			markerWidth="12"
			markerHeight="12"
			viewBox="0 0 12 12"
			refX="6"
			refY="6"
			orient="auto">
			<path d="M2,2 L10,6 L2,10 L6,6 L2,2"
			 style="fill: #000000;"/>
			</marker>
			
			</defs>
			<line x1="0" y1="0" x2="200" y2="50"
			stroke="red" stroke-width="2"
			marker-end="url(#arrow)"/>
			
			<path d="M20,70 T80,100 T160,80 T200,90"
				fill="white" stroke="red" stroke-width="2"
				marker-start="url(#arrow)"
				marker-mid="url(#arrow)"
				marker-end="url(#arrow)"
			/>
			<defs>
			<filter id="GaussianBlur">
				<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
				</filter>
				</defs>
				
			<rect x="100" y="100" width="150" height="100"
			fill="blue" />
			<rect x="300" y="100" width="150" height="100"
			fill="blue" filter="url(#GaussianBlur)" />
			<defs>
			<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" stop-color="#F00"/>
			<stop offset="100%" stop-color="#0FF" />
			</linearGradient>
			</defs>
			
			<rect fill="url(#myGradient)"
			x="10" y="10" width="300" height="100" />
		</svg>
			<p id="mypara">fuck<p>
		<script type="text/javascript">
		var para = document.getElementById("mypara");
		para.onmouseover = function(){
			this.innerHTML="You";
		}
		para.onmouseout = function(){
			this.innerHTML="Fuck";
		}
		console.log("Hello World");
		</script>
	</body>
</html>