无心的专栏

对于代码有洁癖的人,才能写出更好的代码。

SVG路径(path)中的圆弧(A)指令的语法说明及计算逻辑

SVG中的路径数据,即path元素的 d 属性,有一系列的路径绘制指令,其中椭圆弧指令(A)最复杂,不算椭圆弧起始点的x,y坐标的话,依然有 7 个参数。SVG椭圆弧指令的参数,与Canvas等圆弧指令的参数有很大差别,Canvas中使用圆心、半径、起始角度、结束角度等为参数,而SVG使用起始点坐...

2018-03-23 11:06:40

阅读数:2113

评论数:0

为Web服务器配置svgz文件需要的http头,让浏览器可以打开svgz文件

本文介绍了让浏览器能正常显示svgz文件应该怎样进行配置,并给出了Apache httpd服务器上的几种配置方式的示例,以及PHP程序动态输出svgz的例子。

2014-11-03 09:59:18

阅读数:6424

评论数:0

SVG中以任意直线为对称轴的镜像变换及其矩阵

直线一般方程为 A x + B y + C = 0 则以该直线为对称轴,做镜像变换的矩阵为: 任意点P(x,y)变换后的新坐标Q(x',y')的坐标为: SVG中的直线通常是以坐标轴形式或者是两点形式表示的。 如果是以两点线段形式表示的,需要先求出直线方程的系数。 两点(x1,y1),...

2013-09-23 16:06:39

阅读数:5269

评论数:0

Opera中绘制的SVG圆弧很隐蔽的一个bug

Opera浏览器对于SVG bug可不少,而且低级。今天又碰见一个Opera SVG bug. 应用场景是这样:绘制一段很简单的SVG圆弧,移动,保存,再打开,发现圆弧方向竟然变了。 不知道是不是巧合,两年前我写过一篇blog说Opera对Canvas Context 2D的实现中的圆弧指令也...

2013-03-23 23:34:25

阅读数:2158

评论数:0

SVG/SMIL逐帧动画实例

这里只是一个SVG/SMIL逐帧动画实例,记录下来以备忘。 假定现有如下3个svg图案,方、圆、三角形。 未加入动画的SVG代码如下: <rect style="fill:#edd154;fill-opacity:1;stroke:#3c352d;s...

2012-11-29 10:43:17

阅读数:3419

评论数:0

9种网页动画常用实现方式总结

随着HTML5的逐步普及,在Web页上实现动画的方式也增加了,但也带来了一些兼容性问题,本文做一个总结。 目前来说,没有一种方式是完美的。 GIF兼容性最好,但是画质差,无交互。 Canvas很火热,功能也强大,编程难度也稍高,旧IE不支持。 SVG擅长处理矢量图形,交互容易,旧IE不支持...

2012-11-28 16:36:54

阅读数:6254

评论数:5

[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数

SVG spec 1.2以及之前的版本标准中,都只有一种绘制椭圆弧的方式,即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活,可绘制任意的椭圆弧。有时候我们需要计算圆弧的圆心和起始角度、结束角度,虽然标准官方文档给出了计算公式的描述,但是没有...

2012-09-08 16:12:24

阅读数:4115

评论数:2

理解SVG的图形填充规则

本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。 原文网址: SVG fill-rule property in SVG 1.1 (Second Edition) SVG的图形填充规则通过fill-rule属性来指定。 ‘fill-rule’ ...

2012-08-09 17:11:53

阅读数:12940

评论数:1

使用SVG内置API计算图形或点经过transform之后的新坐标

一个应用场景是,点击一条路径,显示该路径的控制点。因为有transform变形( 平移、缩放、倾斜、旋转等变换),所以获取变形后的新坐标需要计算。 纯数学的方法,就是用2D变换矩阵的一些公式去运算,过程稍微有点复杂。 不过好在SVG已经提供了丰富的API将一些矩阵运算封装了,非常实用,下面是D...

2012-05-16 14:42:18

阅读数:3852

评论数:0

SVG动画演示贝塞尔曲线(1-4阶)绘制过程

贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。 先看一下效果图: 点击这里查看动画效果 维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮,顺路贴上来。 核心Javscript

2011-10-13 22:17:28

阅读数:8518

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭