首页 >web前端 >css教程 >如何仅使用 CSS 将阴影添加到 SVG?

如何仅使用 CSS 将阴影添加到 SVG?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-24 03:19:18969浏览

How to Add Drop Shadows to SVGs Using Only CSS?

如何使用 CSS3 为 SVG 创建阴影

使用 CSS3 为 SVG 元素创建阴影是否可行?类似于:

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

遇到了有关使用滤镜效果创建阴影的讨论。有没有只使用CSS的例子?下面是一个功能代码,其中适当应用了光标样式,但不存在阴影效果。如何用最少的代码实现阴影效果?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

解决方案

使用 CSS 'filter' 属性。

兼容 webkit 浏览器,Firefox 34 和 Edge。

polyfill 可用于支持 FF

实现:

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt="" class="shadow" width="200">

<svg class="shadow" ...>
  <rect x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>

<svg>
  <g fill="none" stroke="#decade" stroke-width="2" transform="scale(2)">
    <circle class="shadow" cx="20" cy="20" r="19"/>
    <path class="shadow" d="M 20,1 V 39"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(135, 20, 20)"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(225, 20, 20)"/>
  </g>
</svg>

以上是如何仅使用 CSS 将阴影添加到 SVG?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn