SVG 总结
//文件名：11.svg
<?xml version="1.0" encoding="UTF-8" ?> <!--XML NameSpace：名称空间，用于指定标签所处的语境-->
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="400">
<rect width="250" height="200"></rect>
</svg>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>H5标准之前使用SVG图形的方法</h3>
<img src="11.svg">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #dddddd;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<!--<rect width="250" height="200"></rect>-->
<h3>H5标准之后使用SVG标签的方法</h3>
aa
<svg>
<rect width="250" height="200"></rect>
<!--<div>ABC</div>-->
</svg>
bb
</body>
</html>
svg 绘制矩形：
效果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<!--<div style="stroke:#000">ABCD</div>--> <h3>SVG绘图——矩形</h3>
<svg width="500" height="400">
<!--左上角-->
<rect width="100" height="80"></rect>
<!--右上角-->
<rect width="100" height="80" x="400" y="0"></rect>
<!--左下角-->
<rect width="100" height="80" x="0" y="320" fill="#f00" fill-opacity=".3" stroke="#a00" stroke-width="5" stroke-opacity=".8"></rect>
<!--右下角-->
<rect id="r4" width="100" height="80" x="400" y="320" style="fill:#0f0;stroke:#060;"></rect>
</svg>
<script>
//不能使用HTML DOM方式来访问SVG元素的属性
//r4.width = 10;
//r4.height = 800;
//r4.x = 250;
//r4.x.baseVal.value = 250; //使用核心DOM操作来访问SVG元素的属性
var x = r4.getAttribute('x');
console.log(x); //400
console.log(typeof x);//string
r4.setAttribute('x', '250');
</script> </body>
</html>
svg绘制矩形2： 鼠标移入改变颜色：
结果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h3>SVG绘图——矩形</h3>
<svg width="500" height="400">
<rect id="r1" width="100" height="80" x="200" y="160" fill="#0ff" fill-opacity=".3" stroke="#f00" stroke-opacity=".3"></rect>
</svg>
<script>
r1.onmouseenter = function(){
this.setAttribute('fill-opacity',1)
this.setAttribute('stroke-opacity',1)
}
r1.onmouseleave = function(){
this.setAttribute('fill-opacity',.3)
this.setAttribute('stroke-opacity',.3)
}
</script> </body>
</html>
svg绘制矩形3 点击改变宽度：
效果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h3>SVG绘图——矩形</h3>
<svg width="500" height="400">
<!--<rect id="r1" width="100" height="80"></rect>-->
<rect id="r1" width="100" height="80" x="0"></rect>
</svg>
<script>
r1.onclick = function(){
setInterval(function(){
/*var x = r1.getAttribute('x');
x = parseFloat(x);
x += 10;
r1.setAttribute('x', x);*/ var w = r1.getAttribute('width');
w = parseFloat(w);
w += 5;
r1.setAttribute('width', w);
},50)
}
</script> </body>
</html>
svg绘制矩形4 绘制部门统计表：
效果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h3>SVG绘图——矩形</h3>
<svg id="svg17" width="500" height="400">
</svg>
<script>
var list = [
{label: '部门1', value: 250},
{label: '部门2', value: 300},
{label: '部门3', value: 280}
];
/***为SVG上动态的添加新的图形元素***/
//方式1：HTML字符串拼接
/*var html = '';
for(var i=0; i<list.length; i++){
var d = list[i];
html += `
<rect width="50" height="${d.value}" x="${(2*i+1)*50}" y="50"></rect>
`;
}
svg17.innerHTML = html;*/
//方式2：动态创建新的DOM元素
for(var i=0; i<list.length; i++){
//var r = document.createElement('rect'); //新元素的名称空间默认为html空间
var r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
r.setAttribute('width', 50);
r.setAttribute('height', list[i].value);
r.setAttribute('x', (2*i+1)*50);
svg17.appendChild(r);
} </script> </body>
</html>
svg 绘制圆形：
结果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h3>SVG绘图——圆形</h3>
<svg id="svg17" width="500" height="400">
<circle r="50" cx="250" cy="200"></circle>
</svg> <script> </script> </body>
</html>
SVG 总结的更多相关文章
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- SVG:textPath深入理解
SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
- SVG:linearGradient渐变在直线上失效的问题解决方案
SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...
- HTML5_05之SVG扩展、地理定位、拖放
1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg"> 方法二:<body><svg></svg>&l ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- 关于SVG的viewBox
在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条
stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...
- Notes:SVG(3)---滤镜和渐变
SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...
随机推荐
- 基于对象的跨表查询，多对多查询，多对多操作，聚合查询和分组查询，F查询和Q 查询
基于对象的跨表查询 一对多查询(班级表和学生表) 表结构创建 class Class(models.Model): id = models.AutoField(primary_key=True) cn ...
- linux 搭建 nexus maven私服仓储
一.下载 1.创建下载软件包目录 mkdir /home/install 2.在/home/install下载nexus包,或者将下载好的nexus压缩包上传至/home/install wget ...
- Linux系统启动管理 系统启动流程
概述 linux启动时我们会看到许多启动信息,其过程可以分为5个阶段: BIOS自检 读取MBR 通过Boot Loader引导系统加载 加载initramfe虚拟文件系统 加载内核 运行system ...
- udev和mdev hotplug事件
关于udev和mdev之间的区别与联系我发现自己现在还没有把它完整的给区分开来和联系起来. 设备文件系统有devfs,mdev,udev mdev是udev的简化版本,是busybox中所带的程序,最 ...
- 构造函数与super
1. 当不定义构造方法,系统会为类隐式的创建一个空的无参构造方法 2. 当类定义了有参的构造方法,系统就不会为类创建无参构造方法 3. 子类中,若不显式调用super(), super()会被隐式调用 ...
- MySQLdump增量备份、完全备份与恢复
在数据库表丢失或损坏的情况下,备份你的数据库是很重要的.如果发生系统崩溃,你肯定想能够将你的表尽可能丢失最少的数据恢复到崩溃发生时的状态.场景:每周日执行一次完全备份,每天下午1点执行MySQLdum ...
- MySql判断汉字、日期、数字的具体函数
几个平常用的mysql函数,MySql判断汉字.日期.数字的具体函数分享给大家,具体内容如下 1.判断字符串是否为汉字 返回值:1-汉字 0-非汉字 ? 1 2 3 4 5 6 7 8 9 10 11 ...
- 关于file_get_contents返回False的问题
在本地测试中,使用file_get_contents获取远程服务器的资源是可以的: public function send_post($url, $post_data = null) { $post ...
- java中HashMap集合的常用方法
public Object clone() 返回hashMap集合的副本 其余的方法都是实现Map集合的 https://www.cnblogs.com/xiaostudy/p/9510763.htm ...
- QTableWidget 列排序
connect(uirecord.tableWidget->horizontalHeader(),SIGNAL(sectionClicked(int)),this,SLOT(record_sor ...