master

分支 (1)

管理

管理

master

blog
/
svg.html

<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<head>
	<title>blank</title>
	<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	.myClass {
  fill: url(#image);
  stroke: red;
  stroke-width: 5;
}


	</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--cx xy 用来表示圆心
	stroke 画笔颜色
	stroke-width 画笔宽度
	fill 填充的颜色-->
  <circle cx="150" cy="50" r="40" stroke="blue"
  stroke-width="20" fill="red" />
</svg>


<!--image可以直接使用svg作为src-->
<img src="http://www.w3cschool.cc/try/demo_source/circle1.svg" />

<!--
SVG有一些预定义的形状元素，可被开发者使用和操作
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
  stroke="green"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="0" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.4;
  stroke-opacity:0.5"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect   rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="20" fill="purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:pink"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="450">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
  <polygon points="220,10 300,210 170,250 123,234"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>


<!--
对于Path
下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="500">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="70" y="350">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

<div>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
		<defs>
		    <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="400" >
		        <image xlink:href="huguo.png"  width="100%" height="100%"  preserveAspectRatio="none"/>
		    </pattern>
		</defs>
	    <rect x="0" y="0" width="600" height="400" fill="url(#img1)"   stroke=red   stroke-width="5px"/>
	</svg>
	<input type="button" value="change image" id="btnChangeImage" />
</div>

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id='image' width="1" height="1" >
      <image xlink:href='http://dummyimage.com/600x400/abc/333' width="600" height="400" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
</svg>
<div>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='600px' height='400px'>
    <rect x="0" y="0" width="600" height="400" class="myClass"/>
</svg>
</div>
<script type="text/javascript">
	$(function(){
		$("#btnChangeImage").click(function(){
			window.setInterval(function(){
				var image = $("#img1 image");
				if(image.attr("xlink:href") == "333.png"){
					image.attr("xlink:href", "huguo.png");
				}else{
					image.attr("xlink:href", "333.png");
				}
			},1000);
			$("#img1 image").attr("xlink:href", "333.png");
		});
	});
</script>
</body>
</html>