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" ...
随机推荐
- stm32入门学习路线个人见解
可以说就目前的市场需求来看,stm32在单片机领域已经拥有了绝对的地位,51什么的已经过时了也只能拿来打基础了,最后依然会转到stm32来,也正是因为这样stm32的学习者越来越多,其中不难发现绝大部 ...
- mysql5.7.17源码安装
创建用户和目录 groupadd mysql useradd -r -g mysql mysql mkdir -p /data/mysql/standby/data mkdir -p /data/my ...
- Mac OSX bash function 备份
# mount the android file image function mountAndroid { hdiutil attach ~/android.dmg.sparsefile.spars ...
- 《图解HTTP》读书笔记（三：无状态协议/cookie管理状态）
HTTP是一种不保存状态,即无状态(stateless)协议.HTTP协议自身不对请求和响应之间的通信状态进行保存. ——HTTP/1.1虽然是无状态协议,但为了实现期望的保持状态功能,于是引入了Co ...
- weblogic使用wlst脚本实现自动部署
创建weblogic的server和cluster ip="10.20.0.2" nwport=8001 wwport=9001 nwlist=[ ('wtdsrwnw','Clu ...
- 【tomcat启动失败问题】Unable to start embedded Tomcat
启动spring boot 项目后抛出如下异常: org.springframework.context.ApplicationContextException: Unable to start em ...
- PHP防CC攻击代码
PHP防CC攻击代码: empty($_SERVER['HTTP_VIA']) or exit('Access Denied'); //代理IP直接退出 session_start(); $secon ...
- Jackson流式API
public class JacksonTester { public static void main(String args[]){ JacksonTester tester = new ...
- Cocos Creator 获取当前 Pageview 翻页到第几页的事件索引
新建一个js,叫做 pageAction写一个方法 pageViewClick:function(event,coustom){ var node = event.node; this.pageInd ...
- mvc自定义分页（加页数的）（转）
1.引言 在MVC开发中我们经常会对数据进行分页的展示.通过分页我们可以从服务端获取指定的数据来进行展示.这样既节约了数据库查询的时间也节约了网络传输的数据量.在MVC开发中使用的比较多的应该是MVC ...