SVG
文章平均质量分 52
cuixiping
总想着能有时间就写些小游戏玩,总是没有那么多时间,时间去了哪呢?
展开
-
SVG动画演示贝塞尔曲线(1-4阶)绘制过程
贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。先看一下效果图: 点击这里查看动画效果维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮,顺路贴上来。核心Javscript原创 2011-10-13 22:17:28 · 10573 阅读 · 0 评论 -
SVG中以任意直线为对称轴的镜像变换及其矩阵
直线一般方程为 A x + B y + C = 0则以该直线为对称轴,做镜像变换的矩阵为:任意点P(x,y)变换后的新坐标Q(x',y')的坐标为:SVG中的直线通常是以坐标轴形式或者是两点形式表示的。如果是以两点线段形式表示的,需要先求出直线方程的系数。两点(x1,y1),(x2,y2)确定的直线方程为:(y1-y2)*x + (x2-x1)*y原创 2013-09-23 16:06:39 · 8896 阅读 · 0 评论 -
为Web服务器配置svgz文件需要的http头,让浏览器可以打开svgz文件
本文介绍了让浏览器能正常显示svgz文件应该怎样进行配置,并给出了Apache httpd服务器上的几种配置方式的示例,以及PHP程序动态输出svgz的例子。原创 2014-11-03 09:59:18 · 8007 阅读 · 0 评论 -
9种网页动画常用实现方式总结
随着HTML5的逐步普及,在Web页上实现动画的方式也增加了,但也带来了一些兼容性问题,本文做一个总结。目前来说,没有一种方式是完美的。GIF兼容性最好,但是画质差,无交互。Canvas很火热,功能也强大,编程难度也稍高,旧IE不支持。SVG擅长处理矢量图形,交互容易,旧IE不支持。CSS3很闪亮,但功能有限,旧IE不支持。APNG, SMIL 还需看将来各浏览器的支持原创 2012-11-28 16:36:54 · 11293 阅读 · 5 评论 -
[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数
SVG spec 1.2以及之前的版本标准中,都只有一种绘制椭圆弧的方式,即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活,可绘制任意的椭圆弧。有时候我们需要计算圆弧的圆心和起始角度、结束角度,虽然标准官方文档给出了计算公式的描述,但是没有给出直接的代码。我根据标准文档以及网上的资料,写了一个Javascript函数来做这件事。根据SVG椭...原创 2012-09-08 16:12:24 · 13653 阅读 · 19 评论 -
理解SVG的图形填充规则
本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。原文网址: SVG fill-rule property in SVG 1.1 (Second Edition)SVG的图形填充规则通过fill-rule属性来指定。‘fill-rule’有效值: nonzero | evenodd | inherit默认值:翻译 2012-08-09 17:11:53 · 18352 阅读 · 2 评论 -
使用SVG内置API计算图形或点经过transform之后的新坐标
一个应用场景是,点击一条路径,显示该路径的控制点。因为有transform变形(平移、缩放、倾斜、旋转等变换),所以获取变形后的新坐标需要计算。纯数学的方法,就是用2D变换矩阵的一些公式去运算,过程稍微有点复杂。不过好在SVG已经提供了丰富的API将一些矩阵运算封装了,非常实用,下面是Demo.svg代码.知识点:getScreenCTM() matrixTransform()原创 2012-05-16 14:42:18 · 5583 阅读 · 0 评论 -
SVG路径(path)中的圆弧(A)指令的语法说明及计算逻辑
SVG中的路径数据,即path元素的 d 属性,有一系列的路径绘制指令,其中椭圆弧指令(A)最复杂,不算椭圆弧起始点的x,y坐标的话,依然有7个参数。SVG椭圆弧指令的参数,与Canvas等圆弧指令的参数有很大差别,Canvas中使用圆心、半径、起始角度、结束角度等为参数,而SVG使用起始点坐标、半径、方向、结束点坐标等为参数。SVG之所以实现为这样的参数形式,是因为SVG中的路径包含的每段子...原创 2018-03-23 11:06:40 · 39371 阅读 · 4 评论