svg---基础1
svg：可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网制定，是一个开放标准。
官网：http://www.w3.org/2000/svg
svg样式的两种写法：
1.属性形式；
2.style形式 --->推荐
-------------------------------------------------------------------------------------------------------------------------------
dom的操作 vs HTML：
1.样式操作 跟HTML一样(推荐用style)
2.事件操作 跟HTML一样(完全一样)
3.属性操作 有点区别(set/get)
HTML SVG
设置 .xxx=xxx .setAttribute
.setAttribute
获取 .xxx .getAttribute
.getAttribute
svg更接近于xml；
例：<svg width="800" height="600">
<line x1="100" y1="100" x2="400" y2="300" stroke="red" id="l1" class="box"></line>
</svg>
js事件绑定：
<script>
window.onload=function (){
let oL=document.getElementById('l1');
document.body.onmouseover=function (ev){
if(ev.target.tagName=='line'){
ev.target.style.stroke='yellow';
}
};
document.body.onmouseout=function (ev){
if(ev.target.tagName=='line'){
ev.target.style.stroke='red';
}
};
};
</script>
-------------------------------------------------------------------------------------------------------------------------------
svg的创建：
<body>
<input type="button" value="创建一个线" id="btn1"><br>
<svg width="800" height="600" id="svg1"></svg>
</body>
window.onload=function (){
let oSvg=document.getElementById('svg1');
let oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
let oL=document.createElementNS('http://www.w3.org/2000/svg', 'line'); //创建标签line，创建元素的全称
oL.setAttribute('x1', 100); //setAttribute 不支持json
oL.setAttribute('y1', 100);
oL.setAttribute('x2', 400);
oL.setAttribute('y2', 300);
oL.style.stroke='red';
oSvg.appendChild(oL);
};
};
</script>
//svg不支持document.createElement创建
svg事件、修改、大部分操作跟HTML一样
不同：attribute、createElementNS('网址', 标签)
-------------------------------------------------------------------------------------------------------------------------------
svg图形：
1.rect 矩形 x, y, width, height, rx, ry
<svg width="800" height="600">
<rect x="100" y="100" width="300" height="200" style="fill:yellow; stroke:green; stroke-width:20" rx="10" ry="10"></rect>
</svg>
2.circle 正圆 cx, cy, r
<svg width="800" height="600">
<circle cx="400" cy="300" r="200" style="stroke:red; fill:rgba(0,0,0,0)" onclick="alert('abc')"></circle>
</svg>
body {background:#FC0}
注意：如果没有背景色(fill:none)，会导致背景没有事件——用透明
3.ellipse 椭圆 cx, cy, rx, ry
<svg width="800" height="600">
<ellipse cx="400" cy="300" rx="200" ry="100"></ellipse>
</svg>
4.line 直线 x1, y1, x2, y2
5.多边形
<svg width="800" height="600">
<polyline points="100,100 400,300 200,50 190,21" stroke="red" fill="none"></polyline>
</svg
6.path(路径)----重点
M x, y -->moveTo
L ( x , y ) + -->lineTo
Z
A (arc) A rx ry x-axis-rotation large-arc-flag sweep-flag x y
x半径 y半径 x轴旋转 大弧标志 镜像标志 终点x, y
<path d="
M 100,100
L 400,300
L 200,100
L 300,50
L 150,600
" style="stroke:red;fill:none"></path>
//要闭合
//画弧
<svg width="800" height="600">
<path d="
M 400,100
A 200 200 0 1 1 399.999 100
" style="stroke:red;fill:none;"></path>
</svg>
//画饼
<svg width="800" height="600" id="svg1"></svg>
<script>
function d2a(n){
return n*Math.PI/180;
}
function a2d(n){
return n*180/Math.PI;
}
window.onload=function (){
let oSvg=document.getElementById('svg1');
let cx=400,cy=300,r=200;
function pie(start, end, color='black'){
//求x1,y1
let
x1=cx+Math.sin(d2a(start))*r,
y1=cy-Math.cos(d2a(start))*r;
//求x2,y2
let
x2=cx+Math.sin(d2a(end))*r,
y2=cy-Math.cos(d2a(end))*r;
//生成元素
let oPath=document.createElementNS('http://www.w3.org/2000/svg', 'path');
oPath.style.stroke='none';
oPath.style.fill=color;
oPath.setAttribute('d', `
M ${cx} ${cy}
L ${x1} ${y1}
A ${r} ${r} 0 ${end-start>180?1:0} 1 ${x2} ${y2}
Z
` );
oSvg.appendChild(oPath);
}
pie(100, 300, 'red');
};
</script>
//动画
<input type="button" value="按钮" id="btn1"><br>
<svg width="800" height="600">
<line x1="100" y1="100" x2="400" y2="300" style="stroke:red; stroke-width:100" id="l1"></line>
</svg>
<style media="screen">
#l1 {transition:1s all ease}
</style>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');
let oLine=document.getElementById('l1');
oBtn.onclick=function (){
//oLine.style.stroke='green';
oLine.setAttribute('x2', '100');
};
};
</script>
svg---基础1的更多相关文章
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- D3.js学习笔记（六）——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- SVG 基础图形
SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...
- 深入理解 SVG 系列（一） —— SVG 基础
来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...
- SVG基础绘图实例
SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...
- HTML5 可缩放矢量图形（1）—SVG基础
参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...
- SVG基础图形与参数
SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...
- svg基础--基本语法与标签
svg系列–基础 这里会总结svg的基础知识和一些经典的案例. svg简介 SVG(Scalable Vector Graphics)is an XML-based Language for crea ...
- 学习SVG系列（1）：SVG基础
什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形 ...
- SVG 基础
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- java_基础_abstract抽象关键字
java中,当父类中的某些东西不确定时,可以用abstract关键字将此类变成抽象类(也就是说类并不完整,有些东西要等待子类去实现) 注意事项: 1.抽象类中的抽象方法不能有实体,格式如下 publi ...
- 精心调制的Bash主题分享
第一个是米色背景, 一样遵守蓝色为目录的习惯, 字体为浅灰色,代码和终端看起来相对比较清晰 第二个则是 深海蓝的背景风格,字体都选择饱和度较高的颜色,如下图 终端 配置方法,这里以 mintty 也就 ...
- 接口测试工具-tamper data
1.火狐浏览器插件 安装:1)打开火狐浏览器-alt键-附加组件-搜索tamper data-安装-重启火狐浏览器-在工具下打开tamper data 使用:start tamper 示例:http: ...
- DDD领域驱动
DDD领域驱动领域驱动模型.模型驱动代码接触到需求第一步就是考虑领域模型,而不是将其切割成数据和行为,然后数据用数据库实现,行为使用服务实现,最后造成需求的首肢分离.DDD让你首先考虑的是业务语言而不 ...
- Sql题面试题
哪位大神会此题,请给出答案,十分感谢! 哪位大神会此题,请给出答案,十分感谢!
- 深入了解webpack前，可以了解的小知识点。
阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...
- net Core TOptions和热更新
TOptions接口 net Core 项目有个appsettings.json文件,程序默认也是读取的这个文件,appsettings.json是一个配置文件 我们可以把appsettings.js ...
- Sublime 个人常用快捷键
Sublime 个人常用快捷键 Hot Key Alt + F3 选中文本所以有相同项;同多次Ctrl + D Ctrl + L 选中整行,继续按可继续选 Ctrl + Shift + M 选择括号内 ...
- 计算机网络网络层的IP地址划分及子码
现在在网络层,即就是TCP/IP协议里的网际互联层,最流行IP协议的就是IPV4.其中IP地址的格式是由32位二进制数字表示的,通常为了人们阅读习惯,将其转换成点分十进制来表示,如:192.168.1 ...
- 蓝桥杯近3年初赛题之三（17年b组）
1. 标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是 ...