美文网首页
SVG 特殊效果

SVG 特殊效果

作者: _chuuuing_ | 来源:发表于2017-06-30 20:48 被阅读0次

stroke属性

所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓。相关属性有:

  • stroke:颜色 <path stroke="red" d="M5 20 l215 0" />
  • stroke-width:线宽 <path stroke-width="2" d="M5 20 l215 0" />
  • stroke-linecap:线两段的类型(butt无 / round圆 / square方) <path stroke-linecap="butt" d="M5 20 l215 0" />`
  • stroke-dasharray:用于创建虚线(通过数字大小) <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />

SVG滤镜

SVG滤镜被用来增加SVG图形的特殊效果。

语法:我们通过<filter>标签使用滤镜,注意id属性是必不可少的

可用的滤镜有:

  • feBlend:与图像相结合的滤镜
  • feColorMatrix:用于彩色滤光片转换
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset:过滤阴影
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight:用于照明过滤
  • fePointLight:用于照明过滤
  • feSpotLight:用于照明过滤

注意:可以在一个svg元素上同时使用多个滤镜
注意:IE和Safari不支持SVG滤镜!

模糊效果 feGaussianBlur实例

<filter>元素id属性定义一个滤镜
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<!-- 定义滤镜 -->
     <defs>
       <filter id="filter-1" x="0" y="0">
         <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
       </filter>
     </defs>

<!-- 使用滤镜 -->
     <rect width="90" height="90" stroke="green" stroke-width="3"
     fill="yellow" filter="url(#filter-1)" />

</svg>

阴影 feOffset + feBlend实例

feOffset + feBlend两个元素合作创建 "阴影" 效果。

  • feOffset:负责定义位移
  • feBlend:负责样式。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<!-- 定义阴影 -->
     <defs>
       <filter id="f1" x="0" y="0" width="200%" height="200%">
         <feOffset result="offOut" in="SourceGraphic" dx="30" dy="20" />
         <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
       </filter>
     </defs>

<!-- 使用阴影 -->
     <rect width="90" height="90" stroke="green" stroke-width="3"
     fill="yellow" filter="url(#f1)" />

</svg>
image.png

线性渐变 <linearGradient>

  • y1==y2x1!=x2:水平渐变
  • x1==x2y1!=y2:垂直渐变
  • x1!=x2y1!=y2: 角形渐变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

放射性渐变 <radialGradient>

  • cxcyr属性定义的最外层圆
  • fxfy定义的最内层圆
  • 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定
  • offset属性用来定义渐变色开始和结束
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>```

相关文章

  • SVG 特殊效果

    stroke属性 所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓。相关属性有: stro...

  • 2018-06-27

    jquery特殊效果 1.jquery特殊效果 fadeIn() 淡入 $btn.click(function()...

  • jquery特殊效果

    jquery特殊效果

  • Android图片之svg

    1.SVG是什么2.SVG优点3.SVG使用4.获取SVG5.封装使用6.SVG动画 1.SVG是什么? SVG(...

  • jQuery特殊效果

    jQuery特殊效果 jQuery动画

  • SVG的使用

    SVG图片 一. SVG介绍 1.1. SVG概念解析 SVG全称: Scalable Vector Graphi...

  • 资源

    SVG svg icon 对应git(node.js写的) svg animation study svg cs...

  • (第六天)HTML5之SVG的了解与使用&Web数据存储

    SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用...

  • svg standalone

    简单的 SVG 实例 一个简单的SVG图形例子: 这里是SVG文件(SVG文件的保存与SVG扩展): "http:...

  • SVG学习笔记

    SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...

网友评论

      本文标题:SVG 特殊效果

      本文链接:https://www.haomeiwen.com/subject/hseicxtx.html