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" ...
随机推荐
- 容器—stack
c++ stl栈stack介绍 C++ Stack(堆栈) 是一个容器类的改编,为程序员提供了堆栈的全部功能,——也就是说实现了一个先进后出(FILO)的数据结构. c++ stl栈stack的头文件 ...
- Python 学习笔记6 变量-字典
字典是python中一个十分重要的变量,他是一个可变的容器对象.通过一组key(键)和value(值)对组成一个元素. 组成形式为{'key':'value', 'key':'value'}.整个字典 ...
- tableview Footerview有多余的间距
调整footerView的高度 UIView *footerV = [[UIView alloc] initWithFrame:CGRectMake(, , Main_Screen_Width, )] ...
- Python 字符串的索引
字符串是字符的有序集合,可以通过其位置来获得具体的元素.在 python 中,字符串中的字符是通过索引来提取的,索引从 0 开始. python 可以取负值,表示从末尾提取,最后一个为 -1,倒数第二 ...
- WSL（Windows Subsystem for Linux)笔记一安装与使用
1.安装linux子系统 很简单直接在启动或关闭windows功能 中选择“适用于linux的windows子系统”,确定安装后重启即可,安装还是比较快的只用了几分钟. 也可以直接使用shell命令行 ...
- Typescript基础
参数类型新特性: 类型声明 变量/函数:类型(string.any.number.boolean.void五种基本类型) 例如:var age:number=19; function test(na ...
- js动态改变setInterval的时间
<!DOCTYPE html> <html> <head> <!--meta name="viewport" content=" ...
- Spring Boot 国际化及点击链接跳转国家语言
一.国际化 在SpringBoot中已经自动帮我们配置管理国际化资源的组件,所以我们只需要编写代码就可. @Bean @ConfigurationProperties(prefix = "s ...
- L1-039. 古风排版
L1-039. 古风排版 中国的古人写文字,是从右向左竖向排版的.本题就请你编写程序,把一段文字按古风排版. 输入格式: 输入在第一行给出一个正整数N(<100),是每一列的字符数.第二行给出一 ...
- opencart3图片Google Merchant Center验证通过不了的解决方法
最近在做一个opencart项目,有对接Google Merchant Center,但是一直提示产品图片验证无法通过,ytkah看了一下图片路径,/image/cache/catalog/demo/ ...