posts - 40, comments - 13, trackbacks - 0, articles - 1
  IT博客 :: 首页 :: 新随笔 :: 联系 ::  :: 管理

一年一度的高考又开始了,不知不觉偶都工作3年了,想当年我们也走过那个独木桥!但印象中却没有今天这般引起社会的重视!同样是个下大雨的日子,我们在拼搏!现在站在门外看着门内感觉很微妙!

posted @ 2006-06-07 21:30 WJH 阅读(42) | 评论 (0)编辑 收藏

房子快装修好了,又要收钱了!!!

posted @ 2006-02-23 18:16 WJH 阅读(117) | 评论 (1)编辑 收藏

祝天下所有有情人终成眷属!!!

posted @ 2006-02-14 18:34 WJH 阅读(85) | 评论 (0)编辑 收藏

 SVG主要元素和属性

SVG主要元素和属性
<desc></desc>  注释<!-- -->

<defs></defs>  预定义 待引用  <element id="name">  引用属性:url(#name)

<use xlink:href></use>    引用元素 

<symbol>  模版

<image width height> width height不能省

属性 xml:space="default|preserve" 英文空格

属性 externalResourceRequired="false|true"  必需外部资源与否  若为true 找不到外部资源  
不支持<switch><>选择 平台

<rect x y width height rx ry>  rx ry椭圆半径
    圆角矩形的圆角过渡部分是一段四分之一的椭圆弧,  分别代表其半
长轴和半短轴。当只指明了“rx”或“ry”其中的一个时,另一个缺省值与这个相等。
如果都不指定,则缺省值为o,此时矩形的4个角为直角。如果“rx”的值大于矩形宽
度的一半,则作为一半处理。

<circle cx cy r >

<ellipse cx cy rx ry>

<line x1 y1 x2 y2>

<polyline points="x0,y0 x1,y1  ......"> 折线

<polygon points="x0,y0 x1,y1  ......"> 多边形

<path d="M|L|C|S|Q|T|A|Z" length=>
    (])所有的绘图指令都只用一个字母来表示。
    (2)坐标数据和指令之间的空格可以省略,但坐标致据之间的空格显然不能省略。
    (3)问一行中出现问一条命令多次连续重复使用的情况时,命令名可以只使用第一个,
后面的省略,不过用于数据分网的空格同样不能少。
    (4)命令名是大写字母时代表后面所跟的数据值是绝对坐标,小写字母代表相对坐标。
    (5)当绘制水平或垂直线段时,可以使用H和V命令代替L。使用H或h时,后面只需要
加一个代表x坐标的参数,Y坐标映省与当前点相同。同样,使用v或v时,后面也只需
要加一个代表Y坐标的参数。如果这两个命令字母后面跟了多个数值,则每一个数值被
认为是一次单独的绘制线条的命令,而不像L和1命令那样把每两个数值结合起来作为
一个点的一对坐标值来加以处理。
    (6)一对坐标值的XY坐标之间可以用空格或逗号隔开,但坐标对与坐标对之间只能
用空格作为分隔符。
    (7)路径闭合命令虽然也有Z和z:两种形式,可效果是一样的,使用时没有区别。
本命令不带参数,功能也比较简单,直接从当前点绘制一条直线到本条子路径的起点。
    (8)s和s命令是绘制“光滑”三次贝塞尔曲线的命令。一条复杂的曲线由多个曲线弧段
所构成,弧段与弧段之间要光滑衔接,各个弧段的控制点必须满足一定条件。首先,这一
段曲线弧的起点必须是前一段曲线弧的终点,否则连不上;其次,这一段曲线弧的第一控
制点必须与前一段曲线弧的第二控制点呈对称关系,对称中心是这段曲线弧的起点,只有
这样才能保证曲线衔接处的光滑。S和s命令的语法是“S X2 y2 destx desty”,省略了光滑
曲线弧所隐含的第一个控制点的坐标。命令执行完后,当前点坐标同样停留在最后绘制的
一段曲线弧的终点上。

椭圆弧曲线命令用A或a来表示。其语法比较复杂,是"A rx ry x-axis-rotation large-arc-flag 
sweep-flag x y"  "x-axis-rotation"是此段弧所在的椭圆的X轴与水平方向的夹角,也即x轴的
旋转角度;large-arc-flag、sweep-flag决定了椭圆弧的绘制方向,值是0或1;(x,y)是椭圆弧
终点坐标。至于圆心坐标则是自动计算出来的。

viewBox属性 not viewbox  缺省单位度量

transform属性 ="translate|rotate|skewX|skewY|scale|matrix(a b c d e f)"

preserveAspectRatio属性

<text x y textLength lengthAdjust>

<tspan x y dx dy rotate>从属于<text>
<svg>
  <text style="fill:#000000;font-family:Arial;font-weight:bold;font-size:40;">
    <tspan x="50" y="60,70,80,80,75,60,80,70">COMMUNICATION</tspan>
    <tspan x="50" y="150" dx="0,15" dy="10,10,10,-10,-10,-10,10,10,-10">COMMUNICATION</tspan>
    <tspan x="50" y="230" rotate="10,20,30,40,50,60,70,80,90,90,90,90,90">COMMUNICATION</tspan>
  </text>
</svg>

<tref xlink:href="#">引用<defs>中的<text>

<glyphRun>

<altGlyph xlink:href="#id">

<altGlyphDef id="">

<glyphRef xlink:href= glyphRef=>

<textPath startOffset= method="align|stretch" spacing="exact|auto" xlink:href="">注意嵌套的<tspan>对
后面的走向有叠加作用

fill-rule属性 fill-rule="nonezero|evenodd"

fill-opacity属性 fill-opacity="1|0~1"  

stroke-opacity 属性

stroke-linecap=butt|round|square

stroke-linejoin=miter|round|bevel|

stroke-dasharray="length spacing"

stroke-dashoffset="0|"      表示描边时使用描边模板(如线型、渐变色彩等)的起始偏移量,
缺省值是0,即从头开始。

<maker makerWidth makerHeight makerUnits refX refY orient>

marker-start:url(#) marker-mid:url(#)  marker-end:url(#)

color-interpolation="auto|sRGB|linearRGB"

color-rendering="auto|optimizeSpeed|optimizeQuality"

shape-rendering="auto|optimizeSpeed|crispEdges|geometricPrecision"

text-rendering="auto|optimizeSpeed|optimizeLegibility|geometricPrecision"

image-rendering="auto|optimizeSpeed|optimizeQuality"

<a xlink:href= xlink:type="simple" xlink:show="new|replace" xlink:title xlink:actuate="onRequest" 
target="_top|_self">

<?xml-stylesheet href=".css" type="text/css"?>

<style type="text/css|text/xsl" media="screen|print"><!CDATA[]> </style>

<linearGradient id x1 y1 x2 y2 gradientUnits="objectBoundingBox|userSpaceOnUse" 
spreadMethod="pad|reflect|repeat" xlink:href="" gradientTransform="">  
事实证明缺省时即gradientUnits="objectBoundingBox"时x 1 y1 等属性不起作用

<radialGradient id cx cy r fx fy gradientUnits="objectBoundingBox|userSpaceOnUse" 
spreadMethod="pad|reflect|repeat"  xlink:href="" gradientTransform="">          
 cx cy是形状圆心  fx fy是色彩中心

<stop offset="<length>" stop-color="" stop-opacity="" >

<pattern id x y width height patternUnits="objectBoundingBox|userSpaceOnUse" 
viewBox="" patternTransform xlink:href="" patternTransform="">

overflow="visible|hidden|scroll|auto"

clip="rect(x1 y1 x2 y2)|auto"

<clipPath id clipPathUnits="objectBoundingBox|userSpaceOnUse" clip-Path="url" 
clip-rule="nonezero|evenodd">还可以使用文字作为剪裁路径,此时的“c加·mle”
参数大多数情况都应该设置为“evenodd”,因为文字的轮廓通常都是交叉的。

<mask id maskUnits="objectBoundingBox|userSpaceOnUse" x= y= width height mask="url()">

opacity=  具有继承性和迭加性

posted @ 2006-01-12 21:16 WJH 阅读(3573) | 评论 (0)编辑 收藏

房子装修终于进行了一半了,唉!真累啊!

posted @ 2006-01-12 18:51 WJH 阅读(61) | 评论 (0)编辑 收藏

哈哈,新增加了天气预报功能的链接哦!

posted @ 2006-01-11 21:24 WJH 阅读(63) | 评论 (0)编辑 收藏

基于Batik的SVG应用: 关于几何变换[转帖]
SVG 是一种用 xml 语言来描述二维图形对象的语言,SVG 允许三种图形对象:1.矢量图形,2.图片,3.文本对象。这三种图形对象都可以支持分组,使用样式渲染,进行几何变换。

SVG 还能够通过脚本来实现交互操作和动态显示。可以通过定义动画对象或使用script 脚本来实现动画。

1. SVG 下几种常见的几何变换方式


1.1 一个 SVG 例子
我们首先来看一个 SVG 的例子,窗口右上角有四个色块,每个色块是一个50×50的矩形。

图 1. 一个 SVG 的样本
 

图 2. 样本文档

<?xml version="1.0"?>
<svg >
    <g> 
 <rect x="0" y="0" width="50" height="50" style="fill:red" />
 <rect x="50" y="0" width="50" height="50" style="fill:yellow" />
 <rect x="0" y="50" width="50" height="50" style="fill:green" />
 <rect x="50" y="50" width="50" height="50" style="fill:black" />
    </g>
</svg>

 

1.2 使用 Adobe SVG Viewer 展示在 SVG 文档中实现的几何变换
缩放<g transform="scale(2)">

图 3. 放大一倍
 

平移<g transform="translate(200 ,200)">

图 4. 平移200,200个像素
 

旋转<g transform="rotate(45)">

图 5. 顺时针旋转45度
 

横切<g transform="skewX(45)">

图 6. 以 y 轴为基线在 X 方向横切45度
 

2. 在 Batik 下实现 SVG 的几何变换


2.1 Batik 的基础知识
2.1.1 Batik 的用途 

Batik 是基于 java 语言实现的一个 SVG 应用的工具集,用于实现对 SVG 对象的显示、编辑以及将 SVG 图形对象转换成其他图片格式,如 jpg、gif 等。

这个项目的目标就是给开发人员一套用于处理或应用 SVG 对象的基础核心模型。作为Apache 项目成员之一,该项目也为开发人员提供了一个开发的可扩展的平台。同时 batik 也维护了一个可以查看 SVG 文件的浏览器。虽然 batik 还没有完全实现 SVG 的所有标准语法和标记,但通过比较不同版本的区别就会发现,他正在以很高的效率覆盖 SVG 所有的标准。

2.1.2 让我们实现一个简单的 Batik 程序 

首先让我们实现一个简单的基于 Batik 的 SVG 浏览器。Batik 封装了org.apache.batik.swing.JSVGCanvas 对象可以用于在 swing 中嵌入 SVG 显示容器,并可以通过 org.apache.batik.swing.JSVGCanvas 提供的方法对 SVG 文档和图像进行操作。这个浏览器可以支持大部分 SVG 的语法和标准包括脚本交互的功能,但暂时还没有引入动画。关于动画和脚本交互的内容我们会在以后的文章中讲述,今天先集中解决几何变换的问题。

图 7. 运行程序打开我们编写的 SVG 的例子
 

可以通过该页面引导运行该程序: 
从附件中可以查看该程序的完整代码,也可通过 网上下载地址 运行该程序。 

图 8. 将一个 SVGCanvas 添加到界面

private javax.swing.JPanel SVGPanel = new javax.swing.JPanel();
private JSVGCanvas svgCanvas = new org.apache.batik.swing.JSVGCanvas();
SVGPanel.add("Center", svgCanvas);

 

2.2 通过 Batik 的 GVT 模型实现 SVG 的几何变换
2.2.1 为什么要使用 Batik 来实现 SVG 的几何变换 

当我们用 Batik 工具集作为 SVG 客户端的解决方案时,如缩放平移这样的操作就在所难免了。但 Batik 并没有直接支持如 Adobe SVG Viewer 那样的鼠标拖动几何变换的操作,这就要求我们对这些功能进行编程处理。

在分析 SVG 的几何变换的细节之前,先让我们了解一下基本的操作编程方式。

2.2.2 Batik 下通过 java.awt.geom.AffineTransform 来实现 SVG 的几何变换 

JSVGCanvas 提供方法可以获取 java.awt.geom.AffineTransform 对象。AffineTransform 是用于实现2D 几何图形坐标变换处理的对象,可以通过该对象进行二维几何空间中两个坐标系的相互映射和变换。

平移:

//向左和向下平移50个像素
java.awt.geom.AffineTransform  rat = svgCanvas.getRenderingTransform();
rat.translate(50,50);
svgCanvas.setRenderingTransform(rat);

 

缩放:

//以屏幕左上角原点为固定点进行缩放操作
java.awt.geom.AffineTransform  rat = svgCanvas.getRenderingTransform();
rat.scale(0.5,0.5);
svgCanvas.setRenderingTransform(rat);

 

旋转:

//以屏幕左上角原点为固定点进行旋转缩放
java.awt.geom.AffineTransform  rat = svgCanvas.getRenderingTransform();
rat.rotate(3.1415926/4);
svgCanvas.setRenderingTransform(rat);

 

复合变换:

//一个综合平移、放大和旋转90度的复合变换
java.awt.geom.AffineTransform  rat = svgCanvas.getRenderingTransform();
rat.translate(50,50);
rat.scale(2,2);
rat.rotate(3.1415926/4);
svgCanvas.setRenderingTransform(rat);

 

3. 当我们需要进行复合几何变换的时候


3.1 先来让我们通过不同的变换代码组合实现复合几何变换
先让我们看第一个例子:

//放大一倍和平移50个像素的复合变换 

AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.scale(2,2);
rat.translate(50,50);
svgCanvas.setRenderingTransform(rat);

      
 

图 9. 复合变换一
 

可以看得出来,这个变换的最终效果是:图形的形状放大一倍,原图形的(0,0)原点坐标平移100个像素。

再来看第二个例子:

//放大一倍和平移50个像素的复合变换
AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.translate(50,50);
rat.scale(2,2);
svgCanvas.setRenderingTransform(rat);

      
 

图 10. 复合变换二
 

这个变换的最终效果是:图形的形状放大一倍,原图形的(0,0)原点坐标平移50个像素。

3.2 关键是顺序
比较一下这两种平移后的效果会发现,只是因为缩放和平移的顺序不同,变换后的结果就发生了区别。第一个例子实际平移的不是50个像素,而是100个像素。而第二个例子则是平移了50个像素。

有兴趣的读者可以添加其他几何变换方式,并测试不同的变换顺序,会发现复合变换的顺序与复合变换的最终效果是紧密相关的。那么如何分析和计算复合变换的变换结果呢?这里我们需要补充一点数学知识了。

3.3 对单一的几何变换进行数学模型分析
对计算机图形学中图形变换相关理论很熟悉的人可以跳过这部分直接看 Batik 的实现方式。这节使用的齐次式图片引用自 SVG标准中关于坐标变换的齐次式的例子插图。 

首先我们来了解一下图形变换的齐次式计算方法:

图 11. 基本几何 变换齐次式
 

这是一个基本图形变换齐次式。等式的最右边是一个坐标点未变换前的坐标矩阵,最左边是该坐标点变换后所在位置的一个三行一列的坐标矩阵,中间那个三行三列的矩阵就是变换矩阵。不同的变换方式将对应不同的变换矩阵,图形平移效果就是通过这样一个变换齐次式来实现的。

平移:如果需要将图形平移(tx,ty)个坐标时,采用如下的变换矩阵带入变换方程。

图 12. 平移变换矩阵
 

缩放:如果需要在 x 轴方向实现 sx 倍缩放,在 y 轴方向实现 sy 轴缩放时,采用如下的变换矩阵带入变换方程。

图 13. 缩放变换矩阵
 

旋转:如果需要将图像旋转 a 度时,使用如下的变换矩阵带入变换方程。

图 14. 旋转变换矩阵
 

3.4 采用复合几何变换的数学模型分析
3.4.1 数学分析

当两组变换同时作用于同一个图像时,连续使用该等式,得出如下等式。由于做变换的时候是将变换矩阵放在矩阵积的左边,所以对于复合变换的式子,应该从右向左进行读。对于如下的式子:从右至左依次是变换前的坐标,第一次转换的转换矩阵,第二次转换的转换矩阵,转换后的坐标值。

图 15. 进行两次变换的复合矩阵
 

进一步推导 n 次几何变换的复合变换等式:

图 16. n次变换的复合矩阵
 

3.4.2 来实践一下 

图 17. 变换前效果
 

使用这样一个复合变换方式:

<g transform="translate(50,90) rotate(-45) translate(130,160)"> 

根据前面的分析结果带入变换方程,得出如下等式

图 18. 推导矩阵
 

根据计算后的变换矩阵,可得变换结果是图形整体平移到(255.03,111.21),同时图形自身沿顺时针方向旋转45度。查看实际变换结果,这里我们可以发现,对于 SVG 的变换来说,虽然我们习惯上从左往右写变换参数的,实际上图形做变换的时候是从右边的变换参数开始依次进行图形变换的。

图 19. 变换后效果
 

3.5 分析一下 Batik 是如何实现 SVG 的复合几何变换的
3.5.1 先看第一个例子: 

这个变换是先放大后平移的变换,其变换效果最终是,先将图形的形状放大一倍,然后将图形整个平移100个像素。这里我们可以看出,虽然我们是先进行的放大变换,后进行的平移操作,但当我们进行复合变换的时候由于实际运算时上是先进行了平移,后进行了缩放。或者简单的理解为从左向右先写缩放矩阵,再写平移矩阵,这样得出的变换矩阵就可以对变换后的效果进行计算了。

//放大一倍和平移50个像素的复合变换
//<g transform=" scale(2 ) translate(50 50)">
AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.scale(2,2);
rat.translate(50,50);
svgCanvas.setRenderingTransform(rat);

      
 

我们可以将这个变换对应的计算矩阵写出来:

图 20. 复合变换例一的变换矩阵
 

根据上面的分析我们可以看的出,先进行缩放变换在进行平移变换的复合变换时,变换后原图元的坐标会映射到新的位置,其中:

X1=Sx(X+dx) 
Y1=Sy(Y+dy) 

3.5.2 再来看第二个例子: 

这个变换是先放大后平移的变换,其变换效果最终是,先将图形整个平移50个像素,然后将图形的形状放大一倍。

//放大一倍和平移50个像素的复合变换
//<g transform="translate(50,50) scale(2 )">
AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.translate(50,50);
rat.scale(2,2);
svgCanvas.setRenderingTransform(rat);

      
 

我们可以将这个变换对应的 svg 文档实现写出来:

<g transform="translate(50 50) scale(2 )">

图 21. 复合变换例二的变换矩阵
 

根据上面的分析我们可以看的出,先进行平移变换再进行缩放变换的复合变换时,变换后原图元的坐标会映射到新的位置,其中:

X1=Sx*X+dx 
Y1=Sy*Y+dy 

3.5.3 实用这两个例子的成果 

假设我们需要将图形原点的位置移动到(150,300),同时形状放大到原来的3倍,该如何进行变换来实现这样的效果呢?

图 22. 变换效果
 

使用第一个例子的分析结果,先进行缩放变换,再进行平移变换的方程变换:

图 23. 方程推演
 

根据推导可知需先进行3倍的缩放变换,再平移(50,100)个坐标就可以实现指定的变换效果。实现程序如下

//<g transform=" scale(3 ) translate(50,100)">
AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.scale(3,3);
rat.translate(50,100);
svgCanvas.setRenderingTransform(rat);

      
 

若先进行平移变换,再进行缩放变换的话,根据第二个例子的推导结果:

图 24. 方程推演
 

可知应先进行(150,300)的平移操作,再实现3倍的缩放操作。实现程序如下:

//<g transform=" translate(150,300) scale(3 )">
AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.translate(150,300);
rat.scale(3,3);
svgCanvas.setRenderingTransform(rat);

      
 

4. 一个常用复合变换实例的实现--定点变换
上边我们分析了 Batik 实现 SVG 图形变换的原理和计算方法。下面我们用分析的结果实现一个常用的变换实例:定点变换。变换的种类包括缩放,旋转(一般不考虑定点平移这个概念)。

所谓定点变换就是在图形变换中指定一个固定的点,在变换结束后,该点的位置不发生变化。定点变换在 GIS 的实际运用中很常见,比如将地图放大到指定倍数而保持地图的某个位置(如:鼠标点击的位置)不发生变化。我们以定点缩放为例描述定点变换的使用方法。

假设我们用(x1,y1)点来做定点变换的基准点进行几何变换,要求实现变换后(x1,y1)的位置不变。

定点变换的基本思想是基于这样一个特性:当图像进行缩放,或旋转变换的时候,坐标原点的位置并不发生变化。定点变换的实现方法就是,先将基准点(x1,y1)平移到原点即做一次[-x1,-y1]变换,进行变换后再将变换后的原点平移到(x1,y1)即再进行一次[x1,y1]变换。

图 25. 基于(x1,y1)定点变换
 

实际编程的时候,我们无需对定点变换做如此复杂的运算。例如可以采用如下的方式实现针对(50,50)的定点变换:

//以(50,50)点为基准点进行几何变换
//<g transform="translate(50,50) …………… translate(-50,-50)">
AffineTransform rat = svgCanvas.getRenderingTransform();

        rat.translate(50,50);
//其他变换方式
………………
………………
………………
rat.translate(-50,-50);
svgCanvas.setRenderingTransform(rat);

posted @ 2006-01-07 19:14 WJH 阅读(1460) | 评论 (1)编辑 收藏

http://xml.org.cn/dispbbs.asp?boardID=21&ID=13570

posted @ 2006-01-05 20:58 WJH 阅读(1803) | 评论 (1)编辑 收藏

http://xml.org.cn/dispbbs.asp?boardID=35&ID=6192

posted @ 2006-01-05 17:37 WJH 阅读(2310) | 评论 (6)编辑 收藏

在SVG中使用滤镜效果和输出文字


孟宪会
01-12-18 下午 02:14:13


为了使图像更生动形象,可以在SVG中使用滤镜效果和输出文字的基本方法。
一、在SVG中使用滤镜效果
在SVG中,我们可以直接对基本图象和文字使用这些效果,在SVG使用滤竟效果就和Adobe Photoshop、Macromedia Fireworks中一样,比如:阴影、高斯模糊、金属效果,颜色渐变等,SVG中的滤镜效果有feBlend、feColorMatrix、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset、feSpecularLighting、feTile、feTurbalance、feDistantLight、fePointLight、feSpotLight等。我们可以单独使用这些滤镜效果,也可以组合起来使用。由于这些滤镜的组合很多,我们很难在较短的篇幅里全部讲述,我们只是举其中的几个例子,来让初步认识一下在SVG中如何使用滤镜。
要在SVG中使用滤镜效果,必须把滤镜的定义嵌套在<defs>标记中,顾名思义,defs就是定义(definitions)的意思,它的作用就是定义一些特殊的元素,滤镜的定义也必须放到其中。定义一个滤镜效果,必须使用<filter>标记,同时必须指定一个id名(即唯一标识符),用以标识这个效果是应用到哪些图像上,下面举个具体的例子来加以说明:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="400">
<defs>
<filter id="Gaussian_Blur_Test_for_Mengxianhui">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
</defs>
<rect x="59" y="77" width="163" height="34" style="filter:url(#Gaussian_Blur_Test_for_Mengxianhui);fill:rgb(128,128,255);stroke:rgb(128,0,128);stroke-width:5;" />
</svg>
在上面的例子中,<filter id="Gaussian_Blur_Test_for_Mengxianhui">标记定义了一个高斯模糊的滤镜效果,id值在整个文件中应当是唯一的,文档中的其它元素也可以通过这个id值来重复使用这个滤镜,换句话说,<filter id="Gaussian_Blur_Test_for_Mengxianhui">就相当于一个模板,可以多次被调用。当我们要对某元素使用这个滤镜时,采用的语法是:filter:url(#Gaussian_Blur_Test_for_Mengxianhui),并把它做为style属性的一部分,圆括号的“#”不能省略,它后面的文字就是滤镜定义中的id值。滤镜效果的定义放到<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>标记中,前导符“fe”在所有的滤镜中都有,是filter effect的缩写。例子中的滤镜效果是高斯模糊,stdDeviation属性描述模糊的强弱,数值越大,就越模糊。in="SourceGraphic"定义模糊模糊的效果是对整个图像,若使用SourceAlpha,则表示模糊效果是对图像的alpha通道的,in属性除了用在结果输出之外只有这两种可选择使用的值,在其它滤镜里也是这样,下面也将会讲到。高斯模糊中的stdDeviation这个属性值描述高斯模糊的偏离大小,如果给出两个属性值,则前一个参数代表沿x轴方向的偏离值,后一个值代表沿y轴的偏离值;如果给出一个参数,则代表沿x,y轴的偏离值是一样的。上面的例子的效果如下图所示:
前面已经提到,对一个SVG图像来说,可以组合应用多个滤镜效果,下面看一个紊乱的效果:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<filter id="Turbulence">
<feTurbulence baseFrequency="0.03 0.02" numOctaves="5" type="turbulence" result="turbulenceOutput"/>
<feComposite in="turbulenceOutput" in2="SourceAlpha" operator="in"/>
</filter>
</defs>
<path d="M193.1 79.292 C224.16 88.7968 242.127 121.499 232.627 154.414 C223.127 187.328 239.995 220.003 271.913 229.504 C303.83 239.006 336.35 218.61 345 188.876 C323.124 264.909 248.755 285.576 198.994 270.349 C149.231 255.12 98.1789 196.096 120.144 119.992 C129.376 88.0081 162.039 69.7869 193.1 79.292 zM167.341 136.242 C167.341 141.144 170.673 145.311 176.03 145.311 C181.386 145.311 184.242 140.899 184.242 136.242 C184.242 131.584 180.796 127.762 175.91 127.785 C171.025 127.809 167.341 131.339 167.341 136.242 z"
style="fill:rgb(192,192,255);stroke:rgb(130,0,61);stroke-width:1;filter:url(#Turbulence);" />
</svg>
这个例子里使用了feTurbulence和feComposite滤镜的效果,在SVG中,滤镜可以使用result和in属性进行滤镜的相互嵌套。例子中,在turbulence滤镜里使用了result="turbulenceOutput"属性,表示这个滤镜的结果要输出到别的滤镜中去,feComposite使用in="turbulenceOutput"属性来使用上一个滤镜的输出结果,由于在这个滤镜中已经使用了in属性,因此,SVG提供了in2属性供我们使用,in和in2的作用是一样的;例子中in2="SourceAlpha"属性定义了这个滤镜的单一通道;operator 属性是feComposite滤镜特有的,用来描述合成的类型,可设定over,in,out,atop,xor,arithmetic中的任一个值,大家可以替换不同的值来查看效果的变化。例子中的baseFrequency属性用来描述混沌出现的频率,有x、y两方向的值可以设置。numOctaves属性设定混沌的间隔,可选1-8,默认为1。上面例子的结果如下:
下面是一个比较复杂的例子,大家可以看看他的效果:
<svg width="100%" height="100%">
<defs>
<filter id="metallic">
<feGaussianBlur result="blurredAlpha" in="SourceAlpha" stdDeviation="3"/>
<feOffset result="offsetBlurredAlpha" in="blurredAlpha" dx="2" dy="1"/>
<feDiffuseLighting result="bumpMapDiffuse" in="blurredAlpha" surfaceScale="5" diffuseConstant="0.5" style="lighting-color:rgb(255,255,255)">
<feDistantLight azimuth="135" elevation="60"/>
</feDiffuseLighting>
<feComposite result="litPaint" in="bumpMapDiffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" in2="SourceGraphic"/>
<feSpecularLighting result="bumpMapSpecular" in="blurredAlpha" surfaceScale="5" specularConstant="0.5" specularExponent="10" style="lighting-color:rgb(255,255,255)">
<feDistantLight azimuth="135" elevation="60"/>
</feSpecularLighting>
<feComposite result="litPaint" in="litPaint" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in2="bumpMapSpecular"/>
<feComposite result="litPaint" in="litPaint" operator="in" in2="SourceAlpha"/>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<path d="M233.642 288 C249.9 265.728 318 231.266 318 195.613 C318 133.896 247.069 148.581 232.993 172.957 C218.041 147.832 149 137.805 149 195.613 C149 232.135 219.429 265.911 233.642 288 z" style="filter:url(#metallic);fill:rgb(255,38,255);stroke:rgb(11,11,13);stroke-width:1;" />
</svg>
上面的例子的结果如下:
下面我们看看渐变效果。渐变效果是指从一种颜色到另一种颜色的平滑过渡。SVG中有两种渐变方式:直线渐变和放射渐变。
直线渐变<linearGradient>有水平渐变、垂直渐变和任意角度的渐变三种情况,如果y1、y2的值相同,而x2、x2的值不同,则代表水平渐变;y1、y2不同而x1、x2相同,达标垂直渐变;如果x1、x2,y1、y2都不同,则是角度渐变。颜色可以是两种或多种颜色的组合,每种颜色都要用<stop>标记来指定,它有两个属性:stop-color和stop-opacity,分别表示颜色和透明度。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<linearGradient id="Linear_Gradient_Test_For_Mengxianhui" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:yellow;stop-opacity:1"/>
<stop offset="50%" style="stop-color:red;stop-opacity:1"/>
<stop offset="100%" style="stop-color:blue;stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="200" rx="80" ry="60" style="fill:url(#Linear_Gradient_Test_For_Mengxianhui)"/>
</svg>
上例中<linearGradient>标记定义了一个直线渐变,id属性定义该渐变的唯一标识,x1、y1定义了渐变的开始点坐标,x2、y2定义了渐变的结束点坐标,标记<stop>定义每一种颜色的信息,offset属性渐变色的开始或结束位置。该例子的结果如下:
放射渐变由<radialGradient>标记定义,例子如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="420" height="220">
<defs>
<radialGradient id="fade-to-black" cx="0%" cy="0%" r="20%" spreadMethod="reflect" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:#F8C806;stop-opacity:1"/>
<stop offset="50%" style="stop-color:#000099;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#458900;stop-opacity:1"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="400" height="200" style="fill:url(#fade-to-black);stroke:rgb(0,0,128); stroke-width:0" />
</svg>
上面的cx,cy代表椭圆的圆心,r及rx,ry代表x方向和y方向的半径,spreadMethod代表平铺的方式,有pad,reflect和repeat三种方式。为了理解个参数的意义,您可以试着改变个参数的值,看看它们是如何控制的。该例子的结果如下:
二、在SVG中输出文字
在SVG中,文字都被看成是字符数据,所有的文字放到<text>标记中,但允许使用<tspan>标记进行嵌套,文字也是使用x,y属性在浏览器上进行定位的。例如:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<text x="100px" y="120px"
style="fill:rgb(0,0,0);font-size:36;font-family:Arial">WelCome To Mxh's Colorful World!</text>
<text x="100px" y="160px"
style="fill:rgb(255,0,0);font-size:36;font-family:Arial">http://lucky.myrice.com!</text>
</svg>
上面例子的结果如下:
SVG中的文字是放在一个不可见的矩形区域里,因此,那个矩形区域内的文字被当成一行来处理,而不是象通常的浏览器那样把文字折行显示,要显示多行文字,就必须使用多个<text>标记。当然,我们也可以对文字使用样式,fill属性定义文字的填充颜色,font-size定义文字的字号大小,font-family属性定义文字的字型,SVG中的文字样式和CSS2中的文字样式一样,也有font-style,font-stretch等属性,Web开发人员对文字的显示有了更多的选择。
文字也可以有透明度和图案填充,下面的例子是一个渐变的效果:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<linearGradient id="violet-orange" x1="0%" y1="0%" x2="100%" y2="0%"
spreadMethod="pad" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:rgb(216,192,216);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(175,23,87);stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="49" y="29" width="450" height="41"
style="fill:rgb(0,0,0);stroke:none;stroke-width:1"/>
<text x="70px" y="56px"
style="fill:url(#violet-orange); font-size:20;font-weight:bold;font-family:Arial">Welcome to Meng Xianhui's Colorful World!</text>
</svg>
结果如下:
此外,文字也可以使用滤镜效果,下面的例子就是显示阴影效果的文字:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<defs>
<filter id="Drop_Shadow" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurredAlpha"/>
<feOffset in="blurredAlpha" dx="3" dy="3" result="offsetBlurredAlpha"/>
<feFlood result="flooded" style="flood-color:rgb(99,7,7);flood-opacity:0.65"/>
<feComposite in="flooded" operator="in" in2="offsetBlurredAlpha" result="coloredShadow"/>
<feComposite in="SourceGraphic" in2="coloredShadow" operator="over"/>
</filter>
</defs>
<text x="126px" y="155px" style="fill:rgb(0,0,0); font-size:30;
filter:url(#Drop_Shadow)">Welcome to Meng Xianhui's Colorful World!</text>
</svg>
结果如下:
SVG中另一个重要的概念就是文字或图像的旋转,SVG中,任何元素都可以进行旋转,下面就是旋转文字的例子:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<g style="color:#000000;font-weight:bold;font-style:normal;font-size:24">
<text x="18" y="18" transform="translate(7,7) rotate(30)">Welcome to Meng Xianhui's Colorful World!</text>
</g>
</svg>
上面例子的结果如下:
在上面的例子中使用了<g>标记,这个标记的作用是把里面的其他元素看成是一个完整的组, 和SVG中的嵌套相类似,但有一点是不同的,<g>元素允许使用transform属性,这个属性允许我们操纵其他对象的尺寸位置和形状,即可以是静态的,也可以是动态的。因此,如果你想对一个对象做旋转运动,或者做螺旋运动,或者是变形的效果,那么就可以使用transform属性,translate的值描述旋转的圆心坐标,rotate的值描述旋转的角度。
要浏览以上例子的结果,你可以把代码拷贝到记事本里,最好是拷贝到XMLSpy里,然后保存为*.svg格式,就可以直接用IE6(IE5能否浏览我没有试验)或SVG Viewer来看到效果了。保存时应该注意编码方式,SVG是基于XML的文档格式,因此,文档结构应当满足XML的格式规范(Well-Formed)的要求。

posted @ 2006-01-01 13:18 WJH 阅读(733) | 评论 (0)编辑 收藏

仅列出标题
共4页: 1 2 3 4