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 ...
随机推荐
- NHibernate之配置文件属性说明
一.NHibernate配置所支持的属性 属性名 用途 dialect 设置NHibernate的Dialect类名 - 允许NHibernate针对特定的关系数据库生成优化的SQL 可用值: ful ...
- spring boot集成redis缓存
spring boot项目中使用redis作为缓存. 先创建spring boot的maven工程,在pom.xml中添加依赖 <dependency> <groupId>or ...
- iOS应用内付费(IAP)开发步骤
1.苹果iTunes Connect内购产品信息录入. 1)创建app内购买项目(Create New),选择类型: 1.消耗型项目 对于消耗型 App 内购买项目,用户每次下载时都必须进行购买.一次 ...
- 一个linux命令（6/13）：traceroute命令
通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...
- 【c++ primer, 5e】访问控制与封装
练习 7.16 无,类的接口定义在public说明符之后,类的实现细节定义在private说明符之后. 7.17 有.类成员的默认访问权限不同.class的类成员默认为private,struct的则 ...
- JDK1.7之Fork/join
Fork/Join框架是Java 7提供的一个用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架.Fork/Join框架要完成两件事情: 1.任务分 ...
- [BZOJ1823]满汉全席
Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...
- 配置阿里云maven中央库
<mirrors> <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> ...
- mysql 一些属性
1)定义id,设置int,涉及的属性有: BINARY二进制 UNSIGNED无符号数 UNSIGNED ZEROFILL 在列字段中使用UNSIGNED ZEROFILL属性,如: 插入int(4) ...
- 用idea编译器写第一个Java程序——步骤