常用标签：

<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>

　　

svg学习之旅（3）的更多相关文章

  1. svg学习之旅（1）

    Canvas 与 SVG 的比较 下表列出了 canvas 与 SVG 之间的一些不同之处. Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果 ...

  2. svg学习之旅（2）

    基本图形 circle 圆     cx基于X轴的坐标位置 cy基于y轴的坐标位置 r圆的半径 fill 填充 transparent透明 stroke 边框 stroke-width 边框宽度 st ...

  3. WCF学习之旅—第三个示例之四（三十）

           上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)   ...

  4. Hadoop学习之旅二：HDFS

    本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...

  5. WCF学习之旅—第三个示例之二（二十八）

    上接WCF学习之旅—第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据 第一步,安装Entity Framework 1)  使用NuGet下载最新版的Entity Fram ...

  6. WCF学习之旅—第三个示例之三（二十九）

    上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) 在上一篇文章中我们创建了实体对象与接口协定,在这一篇文章中我们来学习如何创建WCF的服务端代码.具体步骤见下面. ...

  7. WCF学习之旅—WCF服务部署到IIS7.5（九）

    上接   WCF学习之旅—WCF寄宿前的准备(八) 四.WCF服务部署到IIS7.5 我们把WCF寄宿在IIS之上,在IIS中宿主一个服务的主要优点是在发生客户端请求时宿主进程会被自动启动,并且你可以 ...

  8. WCF学习之旅—WCF服务部署到应用程序（十）

    上接  WCF学习之旅—WCF寄宿前的准备(八) WCF学习之旅—WCF服务部署到IIS7.5(九) 五.控制台应用程序宿主 (1) 在解决方案下新建控制台输出项目 ConsoleHosting.如下 ...

  9. WCF学习之旅—WCF服务的Windows 服务程序寄宿（十一）

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) 七 WCF服务的Windows 服务程序寄宿 这种方式的服务寄宿,和IIS一样有一个一样 ...

随机推荐

  1. Oracle EXPDP and IMPDP

    一.特点 • 可通过 DBMS_DATAPUMP 调用 • 可提供以下工具: – expdp – impdp – 基于 Web 的界面 • 提供四种数据移动方法: – 数据文件复制 – 直接路径 – ...

  2. dede网站目录权限设置

    如果你的网站数据十分重要(那种两天就能弄好的垃圾站就算了),建议按本文所说的安全步骤进行严格的设置.1.目录权限 我们不建议用户把栏目目录设置在根目录, 原因是这样进行安全设置会十分的麻烦, 在默认的 ...

  3. 职业生涯手记——记人生中第一次经历的产品上线——内测篇Day11

    2017/08/21 产品内测期Day11 说出来可能你不信,原定于9月15号结束的内测活动,今天居然被甲方投诉导致强制停止,原因是这个内测活动没有经过批准,并且有用户打了甲方所在公司的客服部门,增加 ...

  4. （转）编码剖析Spring依赖注入的原理

    http://blog.csdn.net/yerenyuan_pku/article/details/52834561 Spring的依赖注入 前面我们就已经讲过所谓依赖注入就是指:在运行期,由外部容 ...

  5. laravel composer 扩展包开发（超详细）

    laravel composer 扩展包开发(超详细) 置顶 2018年02月05日 11:09:16 Simael__Aex 阅读数:10396    版权声明:转载请注明出处:http://blo ...

  6. JavaEE-09 Ajax与jQuery在JavaEE项目中的使用

    学习要点 JavaScript实现Ajax jQuery实现Ajax JSON JSON-LIB FastJSON JavaScript实现Ajax 认识Ajax 旧版百度地图 百度搜索自动补全 百度 ...

  7. 全志T8智能汽车方案芯片参数介绍

    T8处理器代表了Allwinner在智能汽车市场上的最新成就.T8适用于需要三维图形.高级视频处理.精密相机.多种连接选项和高水平系统集成的应用程序.它将把先进的消费电子体验带入未来的汽车,实现高性能 ...

  8. svn 设置代理

    Memory4Young Do Not Repeat Yourself! SVN —— 如何设置代理 如果在使用SVN下载外网的资源时,出现这样的提示:No such host is known. 或 ...

  9. iOS 6 的 Smart App Banners 介绍和使用

    iOS 6 的 Smart App Banners 介绍和使用 Denis 留言: 10 浏览:4890 文章目录[隐藏] 什么是 Smart App Banners 在你的网站添加 Smart Ap ...

  10. spring注解开发-AOP（含原理）

    一:AOP基本使用 AOP指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式: 步骤一:导入aop模块:Spring AOP:(spring-aspects) <depen ...