svg学习之旅（3）
常用标签：
<g>标签 是一个容器（分组）标签，用来组合元素的 - 共用属性 - transform = "translate(0,0)"
<text>标签 x y text-anchor start | middle | end | inherit
<image> 标签 x y width height xlink:href
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:780px; height:400px; background:url(img/bg.jpg) no-repeat; margin:20px auto; overflow:hidden;}
body{ background:black;}
</style>
<script>
//780/2 -> x : 390
//400/2 -> y : 200
//(100 + 390)/2 -> 中心点x : 245
//(100 + 200)/2 -> 中心点y : 150
</script>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g style="cursor:pointer">
<line x1="100" y1="100" x2="390" y2="200" stroke="#ccc"></line>
<line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>
<rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>
<text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text>
</g>
<g style="cursor:pointer">
<circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>
<text x="100" y="108" font-size="20" text-anchor="middle">易车网</text>
</g>
<g style="cursor:pointer">
<circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>
<text x="390" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
</g>
</svg>
</div>
</body>
</html>
