使用 css3 的 SVG 投影 [英] 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.
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>
推荐答案
这是一个 示例 使用过滤器"属性将投影应用于某些 svg.如果您想控制阴影的不透明度,请查看 这个例子.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 -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
</feComponentTransfer>
<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 Primer 了解更多您可以使用 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.
这篇关于使用 css3 的 SVG 投影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!