【SVG 2D入门7 - 重用与引用】的更多相关文章

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

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

突袭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入门8 - 文档结构

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

SVG 2D入门13 - svg对决canvas

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

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入门3 - 文本与图像

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

SVG 2D入门1 - SVG综述

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

SVG 2D入门11 - 动画

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

SVG 2D入门12 - SVG DOM

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

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 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…

30分钟入门Java8之方法引用

30分钟入门Java8之方法引用 前言 之前两篇文章分别介绍了Java8的lambda表达式和默认方法和静态接口方法.今天我们继续学习Java8的新语言特性--方法引用(Method References). 在学习lambda表达式之后,我们通常使用lambda表达式来创建匿名方法.然而,有时候我们仅仅是调用了一个已存在的方法.如下: Arrays.sort(stringsArray,(s1,s2)->s1.compareToIgnoreCase(s2)); 在Java8中,我们可以直接通过方…

SVG 图像入门教程

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

Unity 2D入门基础教程之僵尸先生

注:这是根据网上教程完成的. 翻译:http://blog.1vr.cn/?p=1422 原文:http://www.raywenderlich.com/61532/unity-2d-tutorial-getting-started 如果用以前版本的Unity做2D游戏,虽然能做,但是要费很多周折. 比如你可以将一张纹理赋予一个”面片”网格,然后用脚本控制它的动画调整它的位移.如果你要使用物理引擎,那么还要将这个Obeject处理3D的,所以 你还要确保你的Object要有足够的深度以确保他们在…

SVG.js 图案使用和use引用

一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.pattern(20, 20, function (add) { add.rect(20, 20).fill('#f06'); add.rect(10, 10); add.rect(10, 10).move(10, 10); }); //获取url的标识对象,returns 'url(#SvgjsPatte…

Unity 2D 入门

原文:Introduction to Unity 2D 作者:Sean Duffy 译者:kmyhy 3/15/17 更新说明: 升级至 Unity 5.5. Unity 是一个非常流行和强大的游戏引擎,它支持众多的平台和设备.尽管 3D 游戏最近火热,大部分手机游戏.控制台和桌面游戏仍然是以 2D 方式呈现的,因此学习用 Unity 编写 2D 游戏仍然非常重要. 在本教程中,你将编写一个 2D 太空登陆游戏, 并学到如下技能: 如何使用精灵和相机. 如何使用物理 2D 组件处理碰撞和玩法.…

SVG 新手入门

svg 入门新认知 一.第一步创建设置svg <svg width="100%" height="500"> </svg> 设置粗细 5px 的红色线条绘制,图标是无填充的 svg { stroke: #ff0000; stroke-width: 5; fill: none; } 二.<line> 创建一条直线. 使用<line> 元素创建图标 x1:起点的水平轴坐标 y1:起点的竖直轴坐标 x2:终点的水平轴坐标 y…

UNITY 2D入门基础教程

Unity4.3增加了原生的2D开发环境,新建项目时选2D http://blog.1vr.cn/?p=1422…

（译）Windsor入门教程---第二部分 引用Windsor

原文:http://docs.castleproject.org/Windsor.Windsor-tutorial-ASP-NET-MVC-3-application-To-be-Seen.ashx 介绍 在第一部分我们创建了一个mvc应用程序,并且已经添加了Windsor,但是还没有使用它.为了使用Windsor我们需要在应用程序中添加引用.首先我们来看的是控制器工厂,我们将用它来管理我们的控制器和所有其他的依赖项. 控制器工厂 和其他框架不同,IoC容器就像是一个网络管理员.如果它不出错(前…

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…

前端PHP入门-014-参数的引用

我们学习了变量的引用,我们来回顾一下知识: <?php $a = 10; $b = &$a; $a = 100; echo $a.'---------'.$b; ?> 而函数的参数引用,将形参和实参指向到同一个位置.如果形参在函数体内发生变化,那么实参的值也发生变化.我们来通过实验来看看: <?php $foo = 100; //注意:在$n前面加上了&符 function demo(&$n){ $n = 10; return $n + $n; } echo de…

java入门---基本数据类型之引用数据类型&数据类型转换

    接着上一篇文章来,这次就先看看什么是引用数据类型?首先得满足以下条件: 在Java中,引用类型的变量非常类似于C/C++的指针.引用类型指向一个对象,指向对象的变量是引用变量.这些变量在声明时被指定为一个特定的类型,比如 Employee.Puppy 等.变量一旦声明后,类型就不能被改变了. 对象.数组都是引用数据类型. 所有引用类型的默认值都是null. 一个引用变量可以用来引用任何与之兼容的类型. 例子:Site site = new Site("Runoob").    …

SVG新手入门

特点 矢量图 属性:形状的参数(都没有单位) 添加事件跟html一样 修改样式跟html一样 属性操作: setAttribute/getAttribute 图形 <svg width="800" height="800"></svg> <line x1 y1 x2 y2> </line> 线 <rect x y width height rx ry></rect> 填充的图形 rx 是圆角半径…

1.go语言入门----Helloworld与包引用

HelloWorld与包引用 学习一门语言的惯例都是从helloworld开始,go语言也不例外 在gopath下的src中创建一个helloworld目录,创建main.go文件 package main //包声明 import ( // 引用包 "fmt" ) func main() { //主函数 fmt.Println("HelloWorld") } helloworld很简单,但是其中也是有几个需要注意的地方的 main函数,这个是一个go程序的主函数,…

HTML5实战——svg学习

百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准.SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格…

系列文章--突袭HTML5之Javascript

突袭HTML5之Javascript API扩展5 - 其他扩展 突袭HTML5之Javascript API扩展4 - 拖拽 突袭HTML5之Javascript API扩展3 - 本地存储 突袭HTML5之Javascript API扩展2 - 地理信息服务 突袭HTML5之Javascript API扩展1 - Web Worker异步执行 突袭HTML5之HTML元素扩展(下) - 增强的Form元素 突袭HTML5之HTML元素扩展(上) - 新增加的元素 突袭HTML5之WebGL…