关闭

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

本文介绍了让浏览器能正常显示svgz文件应该怎样进行配置,并给出了Apache httpd服务器上的几种配置方式的示例,以及PHP程序动态输出svgz的例子。...
阅读(5017) 评论(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...
阅读(4187) 评论(0)

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

Opera浏览器对于SVG bug可不少,而且低级。今天又碰见一个Opera SVG bug. 应用场景是这样:绘制一段很简单的SVG圆弧,移动,保存,再打开,发现圆弧方向竟然变了。 不知道是不是巧合,两年前我写过一篇blog说Opera对Canvas Context 2D的实现中的圆弧指令也有方向反了的bug,看来Opera的工程师是一辈子闹不清圆弧这种高级货了! 分析得知,圆弧的...
阅读(1950) 评论(0)

SVG/SMIL逐帧动画实例

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

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

随着HTML5的逐步普及,在Web页上实现动画的方式也增加了,但也带来了一些兼容性问题,本文做一个总结。 目前来说,没有一种方式是完美的。 GIF兼容性最好,但是画质差,无交互。 Canvas很火热,功能也强大,编程难度也稍高,旧IE不支持。 SVG擅长处理矢量图形,交互容易,旧IE不支持。 CSS3很闪亮,但功能有限,旧IE不支持。 APNG, SMIL 还需看将来各浏览器的支持...
阅读(5510) 评论(5)

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

SVG spec 1.2以及之前的版本标准中,都只有一种绘制椭圆弧的方式,即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活,可绘制任意的椭圆弧。有时候我们需要计算圆弧的圆心和起始角度、结束角度,虽然标准官方文档给出了计算公式的描述,但是没有给出直接的代码。我根据标准文档以及网上的资料,写了一个Javascript函数来做这件事。...
阅读(3688) 评论(2)

理解SVG的图形填充规则

本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。 原文网址: SVG fill-rule property in SVG 1.1 (Second Edition) SVG的图形填充规则通过fill-rule属性来指定。 ‘fill-rule’ 有效值:   nonzero | evenodd | inherit 默认值:...
阅读(10440) 评论(1)

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

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

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

贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。 先看一下效果图: 点击这里查看动画效果 维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮,顺路贴上来。 核心Javscript...
阅读(7439) 评论(0)
    个人资料
    • 访问:1126741次
    • 积分:11941
    • 等级:
    • 排名:第1294名
    • 原创:166篇
    • 转载:74篇
    • 译文:4篇
    • 评论:255条
    最新评论