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 ...
随机推荐
- ruby项目文件上传功能实现
这里我将从视图.控制器各个层面进行讲解. rails 提供了文件上传功能,可以直接进行下面的编码 <%= form_for :document, :html =>{:multipart = ...
- slf4j-api、slf4j-log4j12以及log4j之间什么关系？
几乎在每个jar包里都可以看到log4j的身影,在多个子工程构成项目中,slf4j相关的冲突时不时就跳出来让你不爽,那么slf4j-api.slf4j-log4j12还有log4j他们是什么关系?我把 ...
- Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) D. Artsem and Saunders
地址:http://codeforces.com/contest/765/problem/D 题目: D. Artsem and Saunders time limit per test 2 seco ...
- powerdesign简单应用
PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...
- ES6 随记（3.3）-- 数组的拓展
上一章请见: 1. ES6 随记(1)-- let 与 const 2. ES6 随记(2)-- 解构赋值 3. ES6 随记(3.1)-- 字符串的拓展 4. ES6 随记(3.2)-- 正则的拓展 ...
- 解决Webpack 安装sass时出现的错误
webpack环境下,加载css需要 css-loader 和 style-loader. css-loader:使用类似@import和url(...)的方法实现 require的功能: style ...
- Python学习笔记之Python的enumerate函数
Python 的 enumerate() 函数就像是一个神秘的黑箱,你无法简单地用一句话来概括这个函数的作用与用法. enumerate() 函数属于非常有用的高级用法,而对于这一点,很多初学者甚至中 ...
- 构造函数与super
1. 当不定义构造方法,系统会为类隐式的创建一个空的无参构造方法 2. 当类定义了有参的构造方法,系统就不会为类创建无参构造方法 3. 子类中,若不显式调用super(), super()会被隐式调用 ...
- Qt性能问题
使用Qt库开发通信上位机软件,如串口.CAN总线等,涉及到接收界面高速刷新,会使CPU消耗率过高(20%以上),可能还会卡顿. 具体原因不知道,突然想放弃Qt了 ps: 1.问题出在界面刷新,会占据C ...
- Android Studio Gradle Could not reserve enough space for object heap
Studio 创建第一个工程报错 Error:Unable to start the daemon process.This problem might be caused by incorrect ...