SVG 基础
<!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 基础的更多相关文章
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- SVG 基础图形
SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...
- 深入理解 SVG 系列(一) —— SVG 基础
来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...
- SVG基础绘图实例
SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...
- HTML5 可缩放矢量图形(1)—SVG基础
参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...
- SVG基础图形与参数
SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...
- svg基础--基本语法与标签
svg系列–基础 这里会总结svg的基础知识和一些经典的案例. svg简介 SVG(Scalable Vector Graphics)is an XML-based Language for crea ...
- 学习SVG系列(1):SVG基础
什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形 ...
随机推荐
- maven nexus私服搭建,特别痛苦!!
一.下载nexu,配置环境 参考我的文章:http://www.cnblogs.com/quanyongan/archive/2013/04/24/3037589.html 二.解压并准备Nexus安 ...
- C#内存释放
看微软件的宣传说NET会自动回收内存.以前一直以为NET会自动回收也没有去细看. 近来发现NET下的winForm程序,默认情况下不会自动释放内存.如果是循执行的程序内存会不断增大.具体会大到多少没有 ...
- I2C VHDL程序
http://blog.sina.com.cn/s/blog_9bd80b7601012o9y.html library ieee ; use ieee.std_logic_1164.all ; us ...
- Tomcat实现分析(一)--类加载及容器组件
启动脚本 启动命令中的参数如下: org.apache.catalina.startup.Bootstrap start -Djava.util.logging.config.file=/opt/ap ...
- 8.4.4 Picasso
Picasso 收到加载及显示图片的任务,创建 Request 并将它交给 Dispatcher,Dispatcher 分发任务到具体 RequestHandler,任务通过 MemoryCache ...
- 8.2 辅助 xUtils 3.0
主要有四大模块: DbUtils模块: android中的orm(对象关系映射)框架,一行代码就可以进行增删改查: 支持事务,默认关闭: 可通过注解自定义表名,列名,外键,唯一性约束,NOT NULL ...
- day12---python mysql pymsql sqlalchemy ORM
RDBMS 术语 在我们开始学习MySQL 数据库前,让我们先了解下RDBMS的一些术语: 数据库: 数据库是一些关联表的集合.. 数据表: 表是数据的矩阵.在一个数据库中的表看起来像一个简单的电子表 ...
- SDK接入(U8SDK)——SDK抽象层的设计
上一篇文章,我们总体地分析并设计了一套高效的SDK接入方案,也罗列出这套方案,我们需要完成的工作.这里再罗列并回顾下: 1.统一抽象的SDK接入框架 2.各个SDK接入实现 3.一键打包工具 4.统一 ...
- c#判断是否为合法的email地址
题目要求: class Program { static void Main(string[] args) { Console.WriteLine("请输入正确的邮箱地址,以 @sina.c ...
- iOS图片如何按比例显示
文/罚难(简书作者)原文链接:http://www.jianshu.com/p/ec7d3f210983著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 只需加这么一段代码,如下: im ...