最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

SVG <feComposite>


This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.

The arithmetic operation is useful for combining the output from the and filters with texture data. If the arithmetic operation is chosen, each result pixel is computed using the following formula:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

 

where:

  • i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively
  • k1, k2, k3 and k4 indicate the values of the attributes with the same name

SVG光照滤镜


<feDiffuseLighting>标记的作用是产生光照效果滤镜,它使用原图的alpha通道作为纹理图,输出的结果取决于光线颜色,光源位置和图片的物体表面纹理。

下面的例子里将使用<feDiffuseLighting>元素产生点光、平行光、聚光照射的滤镜效果。


SVG颜色滤镜


<feColorMatrix>这个过滤器可以根据颜色矩阵来修改目标图形的色彩效果。每一个像素的颜色值(使用[R,G,B,A]矢量表示)乘以矩阵获得新的颜色值。<feColorMatrix>标记里的type属性的值可以是matrix | saturate | hueRotate | luminanceToAlpha


SVG <clipPath>


<clipPath>标记的作用相当于一个蒙版,它能限制哪些地方可见,哪些地方不可见。<clipPath>标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).

<clipPath>元素需要使用clip-path属性来引用。


SVG <g>


<g>标记就是‘group’的简写,是用来分组用的,它能把多个元素放在一组里,对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用<use>进行复制使用。


SVG <symbol>


这个<symbol>标记的作用是定义一个图像模板,你可以使用<use>标记实例化它,然后在SVG文档中反复使用,这种用法非常的高效。<symbol>本身不会输出任何图像,只有使用<use>实例化后才会显示。


SVG <use>


<use>标记的作用是能从SVG文档内部取出一个节点,克隆它,并把它输出到别处。跟‘引用’很相似,但它是深度克隆。


SVG <tspan>


在SVG里,<tspan>标记的作用是将一段文本包裹起来,你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰,它跟HTML标记<span>的作用非常相似。



	

    你丫的 
    	不是 
    	一个香蕉
    

上面的文字使用了下面的SVG代码:

<svg width="250" height="100" viewBox="0 0 250 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <style>

text{
    font: 20px Verdana, Helvetica, Arial, sans-serif;
}

tspan{
  fill: red;
  font-weight: bold
}

  </style>

    <text x="15" y="30">你丫的
      <tspan>不是</tspan> 
      一个香蕉
    </text>
</svg>

SVG文本引用<tref>


提示:新版的svg中已经将<tref>这个标记删除,你可以使用<use>标记替代它。

文本路径<textPath>


在SVG里,处理能沿直线方向写文字外,还能够使用<path>先定义一条路径,让文字沿着定义好的路径排列。textPath标记的作用就是放在<text>标记内部引用预定义的<path>,引用时,我们需要使用xlink:href属性指明需要引用的路径的ID。


  
    
  

  

  
    
      我先往上去,然后往下去,然后再往上去,漂亮吧!
    
  

  
  

上面的图形使用了下面的SVG代码:

<svg width="100%" height="100%" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      我先往上去,然后往下去,然后再往上去,漂亮吧!
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="black" stroke-width="2" />
</svg>