<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>svg</title>、
	<script type="text/javascript" src="d3.js"></script>
	<style type="text/css">
        svg .pumpkin {
			    fill: yellow;
			    stroke: orange;
			    stroke-width: 5;
			 }
	</style>
</head>
<body>
	<svg width="500" height="50"> 
          <!--rect元素会画出一个矩形 可以用x和y来指定它的左上角的位置，而用width和height指定其大小-->
         <rect x="0" y="0" width="500" height="50"/>
         <!--circle元素会画出一个圆。可以用cx和cy来指定圆心位置，而用r来指定其半径。 -->
         <circle cx="250" cy="25" r="25"/>
         <!--ellipse元素椭圆，只不过它在每个轴上的半径可以不一样。因此，半径r变成了rx和ry -->
         <ellipse cx="250" cy="25" rx="100" ry="25"/>
         <!--line元素用来画一条线段。它使用x1和y1指定线段的一个端点位置，而用x2和y2来指定另外一端的位置。笔画stroke的颜色也必须指定-->
         <line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
          <!--text用于渲染文本。它使用x指定文本左边界的位置，用y来指定基线(baseline)的垂直坐标。-->
         <text x="250" y="50" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>
    </svg>
	  <!--svg样式
	    fill — 一个颜色值。和CSS一样，颜色可以有几种指定方式
		颜色名称。比如orange
		十六进制数。比如#3388aa或#38a
		RGB值。比如rgb(10,150,20)
		RGB值加上不透明度。rgba(10,150,20,0.5)
		stroke — 也是一个颜色值，即画线时的颜色
		stroke-width — 一个数值(一般是以像素为单位)
		opacity — 0到1之间的一个数值，0表示完全透明，1表示完全不透明
		通过text，你可以使用下面这些属性，它们含义和CSS是保持一致的。
		font-family
		font-size
	  -->
	  <svg width="500" height="50"> 
	      <circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>
	      <circle cx="100" cy="25" r="22" class="pumpkin"/>
	  </svg>
	  <!--图层和绘制顺序-->
	  <!-- 将SVG视为画布就很好理解了。先画的总是被后画的给掩盖，因而后画的形状表现为最上面。-->
	  <svg>
		<rect x="20" y="5" width="30" height="30" fill="blue"/>
		<rect x="40" y="10" width="30" height="30" fill="green"/>
		<rect x="60" y="15" width="30" height="30" fill="yellow"/>
		<rect x="80" y="20" width="30" height="30" fill="red"/>
	  </svg>
	  <!--透明度-->
	  <!-- 将SVG视为画布就很好理解了。先画的总是被后画的给掩盖，因而后画的形状表现为最上面。-->
	  <svg>
			<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
			<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
			<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
			<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
			<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>
	  </svg>
	   <svg>
			<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/>
            <circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"/>
            <circle cx="105" cy="25" r="20" fill="yellow"stroke="red" stroke-width="10" opacity="0.1"/>
	  </svg>
	  <!--D3.js生成svg-->
	  <script type="text/javascript">
	     var h=50;
	     var w=500;
         var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
         var dataset = [ 5, 10, 15, 20, 25 ];//设置数据源
         var circles = svg.selectAll("circle").data(dataset) .enter().append("circle");
         circles.attr("cx",function(d,i){
         	return (i*50)+25;
         })
         .attr("cy",h/2)
         .attr("fill", "yellow")
         .attr("stroke", "orange")
         .attr("stroke-width", function(d) {
    		return d/2;
         })
         .attr("r",function(d){
         	return d;
         });
	  </script>
</body>
</html>

SVG 基础的更多相关文章

  1. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  2. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  3. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  4. 深入理解 SVG 系列（一） —— SVG 基础

    来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...

  5. SVG基础绘图实例

    SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...

  6. HTML5 可缩放矢量图形（1）—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

  7. SVG基础图形与参数

    SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...

  8. svg基础--基本语法与标签

    svg系列–基础 这里会总结svg的基础知识和一些经典的案例. svg简介 SVG(Scalable Vector Graphics)is an XML-based Language for crea ...

  9. 学习SVG系列（1）：SVG基础

    什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形 ...

随机推荐

  1. http状态码全解

    1**(信息类):表示接收到请求并且继续处理 100--客户必须继续发出请求 101--客户要求服务器根据请求转换HTTP协议版本 2**(响应成功):表示动作被成功接收.理解和接受 200--表明该 ...

  2. js组件之间的通信

    应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...

  3. 用Java程序判断是否是闰年

    我们知道,(1)如果是整百的年份,能被400整除的,是闰年:(2)如果不是整百的年份,能被4整除的,也是闰年.每400年,有97个闰年.鉴于此,程序可以作以下设计: 第一步,判断年份是否被400整除, ...

  4. dom解析xml

    <?xml version="1.0" encoding="UTF-8"?><ShowList> <Movie>  < ...

  5. Pair Project:电梯控制程序

    12061160刘垚鹏 & 12061166宋天舒 1.1结对编程的优缺点结对编程相对于个人编程有很多优点.首先,督促作用,在讨论过程中能够很快投入工作,为了不耽误对方时间,我们会尽快完成各自 ...

  6. Struts2中获取servlet API的几种方式

    struts2是一个全新的MVC框架,如今被广大的企业和开发者所使用,它的功能非常强大.这给我们在使用servlet 纯java代码写项目的时候带来了福音.但是一般来说,我们的项目不到一定规模并不需要 ...

  7. 积累一点ctf需要掌握的常见脚本知识

    1.暴力破解压缩包. 2.利用像素点还原图片. from PIL import Image import re if __name__ == '__main__': x = 887 //将像素点个数进 ...

  8. Bookstore project using XAMPP 详细配置 Part 3

    3. Create PHP 1) “Sublime Text” is used as text editor. 2) HTML part of “hello.php” was created as s ...

  9. 记AbpSession扩展实现过程

    AbpSession只给了userId和TenantId,这次实际项目中并不够用,网上找了很久也没找到好的实现方法.项目初期没有时间进行研究,最近空了试了一下,大致实现添加额外字段并读取相应值的功能. ...

  10. nginx+winsw windows服务

    1.下载Nginx:http://nginx.org/en/download.html 2.下载winsw配置包:http://files.cnblogs.com/files/objecttozero ...