SVG阴影使用css3 [英] SVG drop shadow using css3
问题描述
可以使用css3为svg元素设置阴影，例如
Is it possible to set drop shadow for an svg element using css3 , something like
box-shadow：-5px -5px 5px＃ 888; -webkit-box-shadow：-5px -5px 5px＃888;
我看到一些关于使用滤镜效果创建阴影的评论。有一个使用css单独的例子。下面是一个工作代码，其中cusor风格正确应用，但没有阴影效果。请帮助我获得最小的代码的阴影效果。
I saw some remarks on creating shadow using filter effects. Is there an example of using css alone. Below is a working code where the cusor style is correctly applied, but no shadow effect. Please help me to get the shadow effect with least bit of code.
=========代码=========== ===
========= Code ==============
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="screen">
svg .shadow { cursor:crosshair;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888; }
</style>
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<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>
</body>
</html>
推荐答案
这里是示例使用'filter'属性将dropshadow应用于某些svg。如果你想控制dropshadow的不透明度，请查看本示例。 slope 属性控制为阴影提供多少不透明度。
Here's an example of applying dropshadow to some svg using the 'filter' property. If you want to control the opacity of the dropshadow have a look at this example. The slope attribute controls how much opacity to give to the dropshadow.
示例中的相关位：
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>
Box-shadow定义为在CSS框（读取：矩形）上工作，而svg比只是矩形更富有表现力。请阅读 SVG入门，了解更多有关您可以使用SVG过滤器。
Box-shadow is defined to work on CSS boxes (read: rectangles), while svg is a bit more expressive than just rectangles. Read the SVG Primer to learn a bit more about what you can do with SVG filters.
这篇关于SVG阴影使用css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
