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 ...
随机推荐
- django-admin自定义登录
这个效果,单位代码是User model 的一个外键Company 通过修改form,然后在前端显示 修改form class AuthenticationForm(forms.Form): &quo ...
- mybatis 复习笔记02
1. 一对一查询: 1). 实体类: 2). 定义resultMap <!-- 订单查询关联用户的resultMap 将整个查询的结果映射到cn.itcast.mybatis.po.Orders ...
- MMU解读
转:https://blog.csdn.net/yueqian_scut/article/details/24816757 mmu页表也是放在内存中,mmu里有一个寄存器存放页表首地址,从而找到页表( ...
- BZOJ-5424: 烧桥计划(单调队列)
BZOJ-5424: 烧桥计划(单调队列) 题目链接 题解: 先考虑最暴力的\(dp\):设\(f[k][i]\)表示搞掉第\(1\sim i\)段,烧了\(k\)段的最小花费,设\(calc(x,y ...
- 使用VBS打开程序和关闭程序
下面这个是先执行程序后,然后再结束程序. Dim Wsh Set Wsh = WScript.CreateObject("WScript.Shell") '下行是设置延时启动时间 ...
- SQL优化器执行过程之逻辑算子
我们提到了两种SQL优化器,分别是RBO和CBO.那么无论是RBO,还是CBO都包含了一系列优化规则,这些优化规则可以对关系表达式进行等价转换,从而寻找最优的执行计划. 那么常见的优化规则就包括: 列 ...
- js 技巧总结
插件解析 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想和分享知识提供更专业的工具. 您可以使 ...
- ubuntu 14.04中安装 ruby on rails 环境（填坑版） 呕血推荐
环境:在win7 上Vmware虚拟机环境中安装的ubuntu 14.04 开发相关: ruby 2.2.0 rails 4.2.0 sublime text 3 本文说明:所有的命令均在$ 之后,若 ...
- python递归列出目录及其子目录下所有文件
python递归列出目录及其子目录下所有文件 一.前言 函数的递归,简单来说,就是函数内部调用自己 先举个小例子,求阶乘 def factorial(n): if n == 0: return 1 e ...
- xpath选择器简介及如何使用
xpath选择器简介及如何使用 一.总结 一句话总结:XPath 的全称是 XML Path Language,即 XML 路径语言,它是一种在结构化文档(比如 XML 和 HTML 文档)中定位信息 ...