首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >基于css3的空间矢量图形投影

基于css3的空间矢量图形投影
EN

Stack Overflow用户
提问于 2011-05-22 22:05:30
回答 5查看 503.3K关注 0票数 461

是否可以使用css3为svg元素设置放置阴影,例如

代码语言:javascript
复制
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

我看到一些关于使用滤镜效果创建阴影的评论。有单独使用css的例子吗?下面是一个正常工作的代码,其中正确地应用了cusor样式,但没有阴影效果。请帮助我用最少的代码获得阴影效果。

代码语言:javascript
复制
svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	
代码语言:javascript
复制
<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>

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-05-23 16:29:59

这是一个使用‘example’属性将dropshadow应用于一些svg的滤镜。如果你想控制投影的不透明度,可以看看this exampleslope属性控制为投影提供多少不透明度。

示例中的相关比特:

代码语言:javascript
复制
<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过滤器的信息。

票数 402
EN

Stack Overflow用户

发布于 2019-04-13 23:01:26

您可以使用drop-shadow() CSS函数和rgba颜色值轻松地向svg元素添加投影效果。通过使用rgba颜色值,可以更改阴影的不透明度。

代码语言:javascript
复制
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));
}
代码语言:javascript
复制
<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" />

票数 125
EN

Stack Overflow用户

发布于 2018-08-04 07:20:36

我找到的最简单的方法是使用feDropShadow

代码语言:javascript
复制
<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>

在元素上:

代码语言:javascript
复制
<path d="..." filter="url(#shadow)"/>
票数 45
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6088409

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档