Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

SVG元素投影

  在CSS3中对普通元素的投影只要使用box-shadow就可以实现,但这个属性对SVG元素是无效的。曾经浏览器也为SVG实现过投影样式,比如-webkit-svg-shadow,但这些属性在后来的版本中死掉了。现在要实现投影可以从投影的生成原理上来模拟。
  以前的一篇文章有介绍过IE上实现text-shadow的方法,其原理就是复制一份元素,对其做高斯模糊后放置在正常元素后面。实际上投影就是一个原图的单色模糊版的后置。SVG上也可以通过类似的方法来实现,它也有滤镜可以实现高斯模糊。
<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <!--定义一个滤镜-->
    <filter id="shadow" filterUnits="userSpaceOnUse">
      <!--
        创建一个高斯模糊节点
        输入源图像的Alpha通道
        得到模糊后的结果
      -->
      <feGaussianBlur 
        in="SourceAlpha"
        result="blur-result"
        stdDeviation="2"
      />
      <!--
        创建一个混合节点
        输入源图像和上一个节点模糊的结果
        得到混合后的结果
      -->
      <feBlend
        in="SourceGraphic"
        in2="blur-result"
        mode="normal"
      />
    </filter>
  </defs>
  <!--绘制圆,使用上面定义的滤镜-->
  <circle
    fill="#EEE" stroke="#FFF"
    cx="100.5" cy="100.5" r="90.5"
    filter="url(#shadow)"
  />
</svg>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^