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>

　　

posted @ 2017-04-10 14:38  晓之殇  阅读(148)  评论(0)    收藏  举报