博客专栏  >  前端   >  SVG编程之道

SVG编程之道

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。 SVG 使用 XML 格式定义图像。 在我们的 SVG 教程中,你将学习 SVG 的相关知识。

关注
11 已关注
36篇博文
  • [交互式SVG组件]目录

    Interactive SVG Components ButtonDraggable SVG elementIsometric projectionMulti-line text boxPan ...

    2013-04-10 10:07
    1344
  • [交互式SVG组件]Multi-line text box

    One feature that I know a lot of people, myself included, would like in SVG is a multi-line text box...

    2013-04-10 09:53
    1348
  • [交互式SVG组件]Isometric projection

    http://www.petercollingridge.co.uk/interactive-svg-components/isometric-projection   Isometeric pr...

    2013-04-10 09:47
    1070
  • [交互式SVG组件]SVG元素拖拽

    A common form of computer interaction is the ability to move an element on the screen by clicking on...

    2013-04-10 09:37
    5927
  • [交互式SVG组件]Button

    One of the most basic elements for an interactive image is a button. Arguably any element associated...

    2013-04-10 09:30
    2684
  • How to do Photoshop-like effects in SVG

    How to do Photoshop-like effects in SVG By Erik Dahlström Introduction I came across this nice ...

    2013-01-30 14:37
    1227
  • SVG动画演示贝塞尔曲线(1-4阶)绘制过程

    贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。 先看一下效果图: 点击这里查看动画效果 维基百科中的贝塞尔曲线...

    2013-01-30 10:33
    1379
  • 使用SVG内置API计算图形或点经过transform之后的新坐标

    一个应用场景是,点击一条路径,显示该路径的控制点。因为有transform变形( 平移、缩放、倾斜、旋转等变换),所以获取变形后的新坐标需要计算。 纯数学的方法,就是用2D变换矩阵的一些公式去运算,...

    2013-01-30 10:32
    999
  • 理解SVG的图形填充规则

    本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。 原文网址: SVG fill-rule property in SVG 1.1 (Second Edition)...

    2013-01-30 10:31
    931
  • [SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数

    SVG spec 1.2以及之前的版本标准中,都只有一种绘制椭圆弧的方式,即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活,可绘制任意的椭圆弧...

    2013-01-30 10:29
    1066
  • SVG坐标系统与坐标转换

    这一章非常基础,非常重要,同时也是相对比较难懂一点的,特别是ViewBox与视口的关系 1.坐标系统与视口(ViewPort) SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和...

    2013-01-30 10:10
    4389
  • svg中transform的矩阵变换原理

    transform的原理是计算机图形学中的2D矩阵变换, 在开始之前,首先来复习下一个简单的线性代数知识:矩阵与向量乘法。太复的用不到,只需要3维向量与3x3矩阵的乘积: 接下来我们来说说tr...

    2013-01-30 10:03
    1766
  • svg标签

    一、SVG中对图像标签的支持 Attribute Style: CSS fill 属性定义填充的颜色 CSS stroke-width 属性指定填充线宽 CSS stroke 属性指定bor...

    2013-01-30 10:01
    2042
  • HTML 5中SVG 2D笔画与填充

    填充色 - fill属性 这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了。看例子: rect x="10" y="10" width="100" height...

    2013-01-30 09:59
    1230
  • SVG中的动画元素

    SVG中的动画元素有五个,它们都可以随着时间的变化而改变SVG元素的属性或样式值,如下所示: :改变数值的属性或样式的值; :改变非数据值的属性或样式的值,如visibility属性等; ...

    2013-01-30 09:58
    1552
  • svg平移、放大、缩小及js操作svg

    在svg图形中,很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。 width:宽度,这个宽度是指在页面中实际使用的大小,跟div中定义width是同样的含义。...

    2013-01-30 09:48
    18411
  • 使用SVG实现gradient背景渐变

    使用SVG实现gradient背景渐变 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co...

    2013-01-29 09:01
    1171
  • svg 实例效果图 (内含多个经典特效及功能)

    动态 普通效果 http://www.adobe.com/svg/dynamic/transformations2.html 无JS干预效果 http://www.adobe.com/sv...

    2013-01-17 17:14
    4448
  • svg webtopo原型(1)基本功能

    考虑到svg也是html5的标准之一,考虑继续抽空把svg的topo原型移植完。 阻力:已经有webtopology开源包了,实现的功能基本类似   参照vml模型的顺序,先实现基本的文本和画线...

    2013-01-17 16:53
    975
  • SVG中常用基本形状教程

    SVG的基础形状矩形(rect)、圆(circle)、椭圆(ellipse)、线段(line)、折线(polyline)和多边形(polygon),本文介绍了SVG中这些常用基本形状的语法及教程。 ...

    2013-01-17 16:47
    1784

img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部