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" ...
随机推荐
- 报文分析4、TCP协议的头结构
TCP协议的头结构 来源端口(2字节) 目的端口(2字节) 序号(4字节) 确认序号(4字节) 头长度(4位) 保留(6位) URG ACK PSH RST SYN PIN 窗口大小(2字节) 校验和 ...
- 关于反射和JVM的整理
- ide phpStorm使用git的命令行工具
1.点击phpStorm左下角,点击terminal 2.发现是windows自带的cmd.exe,可以将其改为git的sh.exe 3.打开设置(File -> Settings -> ...
- Java 线程池比较
小结: 1. 高级面试题总结—线程池还能这么玩? - 这个时代,作为程序员可能要学习小程序 - CSDN博客https://blog.csdn.net/androidstarjack/article/ ...
- 微信开发基于springboot
0.申请一个微信公众号,记住他的appId,secret,token,accesstoken 1.创建一个springboot项目.在pom文件里面导入微信开发工具类 <dependency&g ...
- Mysql5.8解压版安装问题：TCP/IP, --shared-memory, or --named-pipe should be configured on NT OS
问题描述: cmd显示如下: .err文件显示: [ERROR] [MY-010131] [Server] TCP/IP, --shared-memory, or --named-pipe shoul ...
- ajax 未加载出数据时，显示loding，数据显示后，隐藏loading
$("#CreateReport").click(function () { // RptID,Template,TemplateType,FileName var RptID = ...
- RoR - More Active Record
Active Record Scope: default_scope: 默认的检索方式 #Use unscoped to break out of the default class Hobby ...
- numpy(四)
逻辑符 : == != < > <= >= x=np.array([1,3,5]) x<3 array([True,False,,False]) (2*x) == ...
- btcpool之GbtMaker
一.简介 GbtMaker全称getblocktemplate maker,它通过getblocktemplate rpc接口从bitcoind获得挖矿所需数据,然后把该数据发送到kafka消息队列. ...