SVG 2D入门12 - SVG DOM

使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM.当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式.这部分的知识大家其实都很熟悉,下面只是简单的看一下. HTML页面中的DOM操作 DOM大家应该很熟悉了,这里先看一个小例子: <head> <style> …

突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzier(p0,p1,p2,t){ var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0]; var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[…

SVG 2D入门13 - svg对决canvas

到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下两种技术的显著特点,看下面的表格: Canvas SVG 基于像素(动态 .png) 基于形状单个 HTML 元素多个图形元素,这些元素成为 DOM 的一部分仅通过脚本修改通过脚本和 CSS 修改事件模型/用户交互颗粒化 (x,y) 事件模型/用户交互抽象化 (rect, path) 图面…

SVG 2D入门1 - SVG综述

位图与矢量图以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再现能力比较强,但是在某些情形下会显得不足.例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边缘,这时,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值:这样会导致图像失真.此外,针对位图进行动画,最多也仅限于生成“翻动书本”类型的动画,即快速连续地显示单独图像. 矢量图通过指定为确定每…

SVG Sprite 入门（SVG图标解决方案）

关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明svg图标的使用和制作. 演示地址代码 SVG Sprite 传统的做法使用AI或者合并SVG图像,然后用background-postion; 打开AI,新建一个30 * 60(px)的画布,设置好网格和参考线. 用AI打开svg文件,然后复制路径到画布上调整大小其他就和css-sprite…

SVG 2D入门11 - 动画

交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果.4. 用户可以很方便的把动画和事件结合起来,完成一些复杂的效果. 通过给SVG元素挂接事件,我们可以使用脚本语言方便的完成一些交互任务.SVG支持大部分的DOM2事件,例如:onfocusin, onfocusou, onclick, onmousedown, o…

SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素 g元素是一种容器,它组合一组相关的图形元素成为一个整体:这样,我们就可以对这个整体进行操作.这个元素通常可以和desc和title元素配合使用,提供文档的结构信息.结构良好的文档通常可读性和渲染效率都不错.看一个小例子: <svg xmlns="http://www.w3.org/2000/svg" …

SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:animate, animateColor, animateMotion, animateTransform, set: 解释元素:desc, metadata, title: 图形元素:circle, ellipse, line, path, polygon, polyline, rect: 结构元素…

SVG 2D入门3 - 文本与图像

SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件.任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行.尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行.如果文本比允许空间长,则简单地将它切断.多数情况下,创建多行文本需要多个文本元素. 此外,可以使用 tspan 元素可以将文本元素分成几部分,允许每部分有各自的样式. 还有,在text元素中,空格的处理与HTML类似:换行和回车变成空格,…

SVG 2D入门10 - 滤镜

滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好. 滤镜用filter元素定义:需要使用的时候,在需要滤镜效果的图形或容器上添加filter属性,引用相关滤镜即可. 滤镜元素包含很多的滤镜原子操作:每个原子操作在传入的对象上执行一个基本的图形操作,并产生图形输出.大多数的原子操作生成的结果基本都是一个RGBA图片.每个原子操作的输入…

SVG 2D入门9 - 蒙板

SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果.至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧. SVG支持的蒙板类型: 1. 裁剪路径(cliping path) 裁剪路径是由path, text或者基本图形组成的图形.所有在裁剪路径内的图形都可见,所有在裁剪路径外的图形都不可见. 2. 遮罩/蒙板(mask) 蒙板是一种容器,它定义了一组图形并将它们作为半透明的媒介,可以用来组合前景对象和背景.…

SVG 2D入门6 - 坐标与变换

坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系.默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下:如下图所示: SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是如果SVG是存储在embedded对象中(例如object元素,或者其他SVG元素),而且包含SVG的文档是用CSS或者XSL格式化的,并且这些外围对象的CSS或者其他指定尺寸的值已经可以计算出视窗的尺寸了,则此时会使用外围对象的尺…

SVG 2D入门5 - 颜色的表示

SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性.基本有下面这些定义颜色的方式:1. 颜色名字: 直接使用颜色名字red, blue, black...2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgba(255,100,100,0.5).3. 十六进制值: 用十六进制定义的颜色,例如#ffffff.4. 渐变值:这个也与canvas中一样,支持两种渐变色:线性渐变,环形渐变.如下图所示: 5. 图案…

SVG 2D入门4 - 笔画与填充

前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果:你会发现这里的内容与canvas基本上是一致的.这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方).填充色 - fill属性这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了.看例子: <rect x="10" y="10" width="100&quo…

SVG 2D入门2 - 图形绘制

基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了.废话不说了,直接看例子,这个最直接: <svg width="200" height="250"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transpare…

SVG 图像入门教程

http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真. SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作. <!DOCTYPE html> <…

d3操作svg路径动画，及dom移动

图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站https://www.vectorizer.io/上生成path路径 2,以下是完整代码及注释 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <…

svg从入门到装逼(一)

svg文件是基于xml的矢量图,而canvas是基于html和js的位图.关于两者的比较,在粗就不赘述了. 1. 首先来上一个svg的基本结构: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&q…

HTML5 Canvas、内联 SVG、Canvas vs. SVG

canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200" height="1…

SVG系列教程：SVG简介与嵌入HTML页面的方式

地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等.感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧. 什么是SVG SVG是"Scalable Vector Graphics&qu…

深入理解DOM节点类型第一篇——12种DOM节点类型概述

× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DO…

HTML入门12

开始了解响应式图片响应式,根据屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片,接下来考虑怎样创建自适应得图片,专注于img元素,完成自适应. 分辨率切换,不同的尺寸 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w,jpg 480w, evla-fairy-880w,jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px,…

SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组

目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四> 基础API SVG 学习<五> SVG动画 SVG 学习<六> SVG的transform SVG 学习<七> SVG的路径——path(1)直线命令.弧线命令 SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令.光滑贝塞尔曲线命令 (转…

react使用引入svg的icon；svg图形制作

由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Icons Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that y…

vue 快速入门系列 —— 虚拟 DOM

其他章节请看: vue 快速入门系列虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对象. 正常的 dom 节点在 html 中是这样表示: <div class='testId'> <p>你好</p> <p>欢迎光临</p> </div> 而在虚拟 dom 中大概是这样: { tag: 'div', attributes…

Cesium入门12 - Camera Modes - 相机模式

Cesium入门12 - Camera Modes - 相机模式 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 为了展现我们的无人机飞行,让我们用相机模式进行实验.我们将保持简单的两个基本的相机模式,用户可以切换之间. Free Mode : 默认相机控制. Drone Mode : 让相机跟随无人机通过飞行在一个固定的距离. 自由模式不需要代码,因为它使用默认控件.至于无人机跟随模式,我们可以使用摄像机的…