基于css3的空间矢量图形投影
基于css3的空间矢量图形投影
提问于 2011-05-22 22:05:30
是否可以使用css3为svg元素设置放置阴影，例如
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;我看到一些关于使用滤镜效果创建阴影的评论。有单独使用css的例子吗？下面是一个正常工作的代码，其中正确地应用了cusor样式，但没有阴影效果。请帮助我用最少的代码获得阴影效果。
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>
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-05-23 16:29:59
这是一个使用‘example’属性将dropshadow应用于一些svg的滤镜。如果你想控制投影的不透明度，可以看看this example。slope属性控制为投影提供多少不透明度。
示例中的相关比特：
<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过滤器的信息。
Stack Overflow用户
发布于 2019-04-13 23:01:26
您可以使用drop-shadow() CSS函数和rgba颜色值轻松地向svg元素添加投影效果。通过使用rgba颜色值，可以更改阴影的不透明度。
img.light-shadow{
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}
img.dark-shadow{
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}<img class="light-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />
<img class="dark-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />
Stack Overflow用户
发布于 2018-08-04 07:20:36
我找到的最简单的方法是使用feDropShadow。
<filter id="shadow" x="0" y="0" width="200%" height="200%">
<feDropShadow dx="40" dy="40" stdDeviation="35" flood-color="#ff0000" flood-opacity="1" />
</filter>在元素上：
<path d="..." filter="url(#shadow)"/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6088409
复制相关文章
相似问题
腾讯云开发者
