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 ...
随机推荐
- 与进程相关的命令ps、kill
一.概述 Ubuntu中主要有如下操作进程的命令 二.进程查看命令 ps 2.1 ps –l PPID:父进程的 PID PID:进程的PID S:进程状态,S:是指sleep睡眠状态:T:是挂起状态 ...
- uva 11752 The Super Powers (数论+枚举)
题意:找出1~2^64-1中 能写成至少两个数的幂形式的数,再按顺序输出 分析:只有幂是合数的数才是符合要求的.而幂不会超过64,预处理出64以内的合数. 因为最小的合数是4,所以枚举的上限是2的16 ...
- Kotlin学习记录1
参考我的博客:http://www.isedwardtang.com/2017/09/02/kotlin-primer-1/
- Linux 进程管理 进程优先级管理
Linux进程优先级 Linux 是一个多用户.多任务的操作系统,系统中通常运行着非常多的进程.但是 CPU 在一个时钟周期内只能运算一条指令(现在的 CPU 采用了多线程.多核心技术,所以在一个时钟 ...
- nor flash的一般操作与分析
是现在市场上两种主要的非易失闪存技术.Intel于1988年首先开发出NOR Flash 技术,彻底改变了原先由EPROM(Electrically Programmable Read-Only-Me ...
- Spring 之高级装配
[环境与Profile] 暂略 [条件化的bean] 暂略 [处理自动装配歧义性] 暂略 [ bean 的作用域] 在 @Componen . @Bean 下以及 XML 中的声明方式如下所示, @C ...
- ASP.NET的内置对象
Request 该对象用于检索从浏览器向服务器所发送的请求中的信息.在按下“提交”按钮时,Request对象将读取和提取通过HTTP请求发送的参数.在用户提交表单时,包含在输入控件中的数据将与表单 ...
- 偶然发现有的IIS里的程序,连接 不上SQL Server数据库, 超时
经查应用程序池中, 有一个启用32位应用程序, 有时打开它就能连接上SQL SERVER了.
- Graph_Master(连通分量_A_双连通分量+桥)
hdu 5409 题目大意:给出一张简单图,求对应输入的m条边,第i-th条边被删除后,哪两个点不连通(u,v,u<v),若有多解,使得u尽量大的同时v尽量小. 解题过程:拿到题面的第一反应缩点 ...
- matplotlib之散点图
环境:windows系统,anaconda3 64位,python 3.6 1.初认识 基本代码如下: import numpy as np import matplotlib.pyplot as p ...