SVG 入门教程(三) 绘制

原文出处:https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html

 

笔划与填充

<nobr>第 1 页（共5 页）</nobr>

整个教程到目前为止，示例已经演示了围绕对象的笔划或线以及对象内部区域的填充。这些属性实际上还有子属性，也可以设置子属性来创建不同的效果。这些属性包括：

• fill：该属性指定用来填充对象内部区域的颜料。大多数情况下，该属性只是一种颜色，但它也可以是渐变或图案（会在图案中介绍）。这个值通常是关键字、颜色说明或指向预定义元素的 URI。
• fill-opacity：该属性指定元素的透明性。值的范围从完全透明（0）到完全不透明（1）。
• stroke：该属性指定元素外边框的外观。象 fill 一样，它引用颜料，尽管通常将它指定为一种简单颜色。
• stroke-width：该属性指定笔划线的宽度。
• stroke-linecap：该属性确定线末端的形状，可取的值有粗端（缺省值）、圆和正方形。
• stroke-linejoin：该属性确定对象各角的外观。允许的值有直角（缺省值）、圆和斜角，它如示例中所示将尖角的边缘“剪掉”。
• stroke-dasharray：该属性是一个整数系列（如 3、2、3、2、4、3、2 和 3），它允许对虚线中每一划的相对长度进行控制。
• stroke-opacity：类似于 fill-opacity，该属性确定元素笔划线的相对透明性。

您可以在下面看到这些属性的一些示例：

xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>Stroke and filldesc>
  <defs>

     <linearGradient id="lineGradient">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="yellow" />
     linearGradient>

     <polygon id="lens" points="65,50 185,50 185,75, 150,100
                                          100,100 65,75"
             fill="pink" stroke="purple" stroke-width="4"
             fill-opacity=".5"/>

. . .

  defs>

  <g>

. . .

    <line x1="65" y1="50" x2="310" y2="50"
                          stroke="plum" stroke-width="2"/>

    <!---->
    <rect x="50" y="125" width="275" height="40" fill="orange"
           stroke-width="6" stroke="url(#lineGradient)" />

    <!---->
    <line x1="65" y1="190" x2="310" y2="190"
                          stroke="purple" stroke-width="20"
                          stroke-linecap="round"/>

    <!---->
    <polygon points="50,250 100,225 300,225 200,275" stroke="blue"
          fill="none" stroke-width="10" stroke-linejoin="bevel" />

  g>
svg>

 

颜色	<nobr>第 2 页（共5 页）</nobr>

颜色对于 SVG 图像是极其重要的。单个颜色可以直接使用它们的 RGB 值指定，或者使用差不多 150 个颜色关键字中的一个来间接指定，该关键字也引用 RGB 值。

RGB 值在 0 到 255 数值范围内指定一种颜色的红、绿、蓝成分的相对亮度。例如：

xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <desc>Colorsdesc>
  <defs>
  defs>

  <g>

     <text x="20" y="50" font-size="30">Colors can be specifiedtext>
     <text x="20" y="100" font-size="30">by their
        <tspan fill="rgb(255,0,0)">Rtspan>
        <tspan fill="rgb(0,255,0)">Gtspan>
        <tspan fill="rgb(0,0,255)">Btspan>
     valuestext>
     <text x="20" y="150" font-size="30">or by keywords such astext>
     <text x="20" y="200" font-size="30">
        <tspan fill="lightsteelblue">lightsteelbluetspan>,
     text>
     <text x="20" y="250" font-size="30">
        <tspan fill="mediumseagreen">mediumseagreentspan>,
     text>
     <text x="20" y="300" font-size="30">and
        <tspan fill="darkorchid">darkorchidtspan>.
     text>

  g>
svg>

渐变
<nobr>第 3 页（共5 页）</nobr>


正象您在前面的示例中看到的，渐变提供了将颜色混合在一起的能力。渐变有两种。对于每种情况，代码都指定沿着渐变向量的颜色“停止”或颜色点，渐变到这些点就成为某种颜色。例如，指定红色在 0% 停止，白色在 50% 停止而蓝色在 100% 停止的渐变将逐渐由红色变为白色再变为蓝色，白色在渐变向量的中心。
可以推断或者直接指定渐变向量。以线性渐变为例，假设它从要填充区域的左缘开始到右缘结束。可以用 x1、y1、x2 和 y2 属性更改这一向量。也可以（依照）使用 gradientTransform 属性对这一向量进行变换。
以放射性渐变为例，渐变基于一个圆，可以用 cx、cy 和 r 属性调整外部圆（渐变向量终止的地方）的圆心和半径。可以使用 fx 和 fy 属性调整焦点（渐变向量起始的地方）。
考虑下面这些线性和放射性渐变的示例：
xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <desc>Colorsdesc>
  <defs>
     <linearGradient id="linear1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="white"/>
        <stop offset="100%" stop-color="blue"/>
     linearGradient>
     <linearGradient id="linear2" x1="100%" y1="0%" x2="0%"
                                    y2="100%">
. . .
     linearGradient>
     <linearGradient id="linear3" gradientTransform="rotate(90)">
. . .
     linearGradient>
     <radialGradient id="radial1">
. . .
     radialGradient>
     <radialGradient id="radial2" fx="225" fy="225">

. . .
     radialGradient>
     <radialGradient id="radial3" cx="25%" cy="25%" r="75%">
. . .
     radialGradient>

  defs>

  <g>

     <!---->
     <rect x="10" y="10" height="100" width="100" stroke="black"
                                    fill="url(#linear1)"/>
     <rect x="125" y="10" height="100" width="100" stroke="black"
                                    fill="url(#linear2)"/>
     <rect x="240" y="10" height="100" width="100" stroke="black"
                                    fill="url(#linear3)"/>

     <!---->
     <rect x="10" y="125" height="100" width="100" stroke="black"
                                    fill="url(#radial1)"/>
     <rect x="125" y="125" height="100" width="100" stroke="black"
                                    fill="url(#radial2)"/>
     <rect x="240" y="125" height="100" width="100" stroke="black"
                                    fill="url(#radial3)"/>

  g>
svg>

 




    
        

            
图案
            
<nobr>第 4 页（共5 页）</nobr>
        
    






用图案填充对象在很多地方与用渐变填充类似。两种情况下，都定义填充然后从填充属性内部调用它。
定义图案与定义任何其它作为 SVG 图像一部分出现的对象相似。它有位置、高度和宽度，通常还有一个或多个包含的对象。位置是基于整个文档还是基于正在被填充的对象由 patternUnits 属性确定，该属性可以设置为 objectBoundingBox 或 userSpaceOnUse；这些属性分别设置基于对象和文档的坐标。与渐变相似，可以变换图案（使用 patternTransform 属性）。
请考虑下面的示例：
xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <desc>Patternsdesc>
  <defs>
      <pattern id="notes" x="0" y="0" width="50" height="75"
                   patternTransform="rotate(15)"
                   patternUnits="userSpaceOnUse">

         <ellipse cx="10" cy="30" rx="10" ry="5"/>
         <line x1="20" y1="30" x2="20" y2="0"
                   stroke-width="3" stroke="black"/>
         <line x1="20" y1="0" x2="30" y2="5"
                   stroke-width="3" stroke="black"/>

      pattern>
  defs>

  <g>
     <ellipse cx="175" cy="100" rx="125" ry="60"
           fill="url(#notes)" stroke="black" stroke-width="5"/>
  g>
svg>

 




    
        

            
滤镜
            
<nobr>第 5 页（共5 页）</nobr>
        
    






也许 SVG 最强大的功能之一就是给图像添加了滤镜效果。这些效果复制了昂贵的图形操作程序中的许多效果，如光照效果和高斯模糊。对这些滤镜的完整讨论超出了本教程的范围，不过本页讨论了一些基本滤镜。
对 SVG 图像的滤镜操作包括创建一系列滤镜原语操作，该系列中每个原语操作都有自己的目的。例如，偏移滤镜按指定信息将源图像左移或右移以及上移或下移。高斯模糊原语操作按要求对源图像进行模糊处理。
源图像不必一定是实际的 SVG 图像。例如，它可以是前一个原语操作的结果。下面的代码将几个滤镜应用到前一页中显示的图案。
xml 代码
<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>Filtersdesc>
  <defs>

      <filter id="dropShadow" filterUnits="userSpaceOnUse"
                      x="0" y="0" width="400" height="200">
         <feOffset in="SourceAlpha" dx="5" dy="5" result="offset"/>
         <feGaussianBlur in="offset" stdDeviation="5" result="blur"/>
         <feMerge>
           <feMergeNode in="blur"/>
           <feMergeNode in="SourceGraphic"/>
         feMerge>
      filter>

. . .
  defs>

  <g>
     <ellipse filter="url(#dropShadow)" cx="175" cy="100"
           rx="125" ry="60"
           fill="url(#notes)" stroke="black" stroke-width="5"/>
  g>
svg>

首先，偏移滤镜将原始椭圆及其图案的 alpha 通道作为源（使用 in 属性）。alpha 通道由与图像中每个非白色像素对应的黑色像素组成，并且用 SourceAlpha 关键字指定。偏移原语操作完成处理然后将结果输出到一个由 result 属性指定的缓冲区（本例中的缓冲区名为 offset ）。
接下来，模糊原语操作接任。它将 in 参数指定的 offset 缓冲区的内容作为源。然后，它将其结果输出到 result 属性指定的名为 blur 的缓冲区。
这时，滤镜仅由经过偏移和模糊的图像组成。如果滤镜操作到此为止，那么页面上只出现模糊处理的图像。合并原语操作取得 blur 缓冲区的内容然后将它与原始源图形合并，正如当 in 属性引用 SourceGraphic 关键字时所指定的那样。
所有处理的结果是一幅具有阴影效果的原始图像：
 

• s8.rar (866 Bytes)
• 下载次数: 11

分享到：

svg鼠标响应事件的四种方法 | SVG 入门教程(二) 定义和组

• 2007-11-17 23:38
• 浏览 2245
• 评论(0)
• 查看更多