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的更多相关文章

  1. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  2. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  3. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  4. 深入理解 SVG 系列（一） —— SVG 基础

    来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...

  5. SVG基础绘图实例

    SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...

  6. HTML5 可缩放矢量图形（1）—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

  7. SVG基础图形与参数

    SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...

  8. svg基础--基本语法与标签

    svg系列–基础 这里会总结svg的基础知识和一些经典的案例. svg简介 SVG(Scalable Vector Graphics)is an XML-based Language for crea ...

  9. 学习SVG系列（1）：SVG基础

    什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形 ...

  10. SVG 基础

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. HTML5 页面编辑API之Range对象

    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...

  2. 对Vuex的初步了解

    文章转载于:http://www.cnblogs.com/wisewrong/p/6344390.html 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props ...

  3. win10环境下Android SDK下载安装及配置教程

    最近在配置Android环境时,发现网上许多教程都是在win7版本下进行配置的且存在许多问题,按照流程无法正确配置环境,因此我在收集网上资料及亲自配置成功的情况下,写出此文章.如有无法配置成功的话,欢 ...

  4. vs2017无法安装

    vs2017无法安装,无错误提示和日志 参考:https://blog.csdn.net/jq0123/article/details/83987686 但是解决方法不一样,运行安装程序没有提示,需要 ...

  5. python 录入姓名和成绩, 并且求平均值

    lst = []while 1: a = input("请输入学生的姓名和成绩(姓名_成绩), 输入Q退出录入:") if a.upper() == "Q": ...

  6. httpappplication 和 httpmodule 的理解（转载，写的很好）

    第一部分:转载自Artech  IIS与ASP.NET管道 ASP.NET管道 以IIS 6.0为例,在工作进程w3wp.exe中,利用Aspnet_ispai.dll加载.NET运行时(如果.NET ...

  7. [MSF]server/capture/http_javascript_keylogger键盘记录

    server/capture/http_javascript_keylogger DEMO使用的官方的效果图: 使用方法: show options 看看 msf auxiliary(server/c ...

  8. CentOS7 源码编译安装Tengine

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 发展 Tengine的性能和 ...

  9. ASP.NET MVC案例教程（六）

    ASP.NET六 一个小难题 我们继续完善“MVC公告发布系统”,这次,我们的需求是对公告发布功能添加日志记录能力,即在发布公告前,记录一次,在公告发布成功后,再记录一次.然后还要使得其具备异常处理, ...

  10. 怎样的操作才能让HashMap以红黑树类型存储数据? (文中没有解答该问题)

    怎样才能让HashMap以红黑树类型存储数据? 看上面的代码可知:如果一个Node的长度大于等于7.就会触发Node转TreeNode的操作. 我向一个map中插入了一百万条数据(插入一亿条时,内存溢 ...