首页 > web前端 > H5教程 > 正文

SVG(可缩放矢量图形)图片添加、高斯模糊、渐变与g标签

黄舟
发布: 2017-02-27 15:18:49
原创
2519 人浏览过


今天主要谈一下SVG的特殊效果
其实和canvas都是差不多的,只不过是利用XML标签
用的不是很多但是以防以后万一用到还是整理一下

图片添加

svg中也可以添加图片

<svg width=300 height=300>
    <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>
登录后复制

注意这里是image标签而不是我们html中的img标签

xlink:href指定资源路径
x,y 图片坐标位置
height,width 图片在svg中显示的宽高

滤镜原语

svg给我们提供了很多滤镜

  • feBlend

  • feColorMatrix

  • feComponentTransfer

  • feComposite

  • feConvolveMatrix

  • feDiffuseLighting

  • feDisplacementMap

  • feFlood

  • feGaussianBlur

  • feImage

  • feMerge

  • feMorphology

  • feOffset

  • feSpecularLighting

  • feTile

  • feTurbulence

  • feDistantLight

  • fePointLight

  • feSpotLight

使用filter标签来定义滤镜,而且滤镜必须有id标识
图形元素通过 filter = "url(#id)" 来引用滤镜

使用滤镜可以构建绚丽的图案
我们主要来看一下这个feGaussianBlur高斯模糊滤镜

高斯模糊

feGaussianBlur用于创建模糊效果
滤镜定义在defs元素中

<svg width=100 height=100>
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15">
    </filter>
  </defs>
  <rect width="100" height="100" stroke="blue" stroke-width="3"
  fill="red" filter="url(#f1)"></svg>
登录后复制

filter id属性定义一个滤镜的唯一名称
feGaussianBlur 定义模糊效果
in 定义了由整个图像创建效果
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
< filter-primitive-reference >)
stdDeviation 定义模糊量
rect元素的滤镜属性把元素链接到”f1”滤镜

渐变

同样分为线性渐变和径向渐变
用法类比canvas的渐变

线性渐变

<svg widht=300 height=300>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad1)" /></svg>
登录后复制

linearGradient的 x1,y1,x2,y2定义了渐变起始和结束位置
颜色方位由stop标签指定
注意XML单标签是要有“/”的,否则标签无效 <stop />

径向渐变

<svg width=300 height=300>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:0" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad2)" /></svg>
登录后复制

radialGradient的cx,cy和r定义最外层圆
fx和fy定义最内层圆
颜色同样由stop标签指定

g标签

我们在使用工具的时候
可能会在导出代码中看到
其实这个XML标签没有什么神奇的
它就相当于一个容器,我们可以为它内部的图形指定相同的样式
比如说颜色、坐标系、滤镜等等

<svg width=300 height=300 viewbox="0 0 30 30">
    <g stroke="red">
        <path d="M 5 10 L 25 10"></path>
        <path d="M 5 15 L 25 15"></path>
        <path d="M 5 20 L 25 20"></path>
    </g></svg>
登录后复制

最后推荐给大家一个svg库snap.svg
可以让我们像jQuery操作DOM一样操作SVG
snap.svg

 以上就是SVG(可缩放矢量图形)图片添加、高斯模糊、渐变与g标签的内容,更多相关内容请关注PHP中文网(www.php.cn)!


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!