Html 使用 css3 的 SVG 投影

发布于05月23日

是否可以使用CSS3为SVG元素设置投影，如下所示

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

我看到一些关于使用过滤效果创建阴影的 comments .是否有单独使用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>

推荐答案

下面是使用"filter"属性将dropshadow应用于某些svg的example个示例.如果你想控制dropshadow的不透明度，可以看看this example.slope属性控制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过滤器的功能.

Html相关问答推荐

使用固定的HTML代码创建两个可向右滚动的行

Html 使用 css3 的 SVG 投影

推荐答案

Html相关问答推荐

使用固定的HTML代码创建两个可向右滚动的行

有没有可能设置div的边框宽度相对于其父宽度和高度？'

将网格包装在css中

Angular /HTML5不会播放本地文件夹中的音频mpeg

在NzMessageService中传递动态TemplateRef- Angular 15

如何在一行文本溢出省略号后显示文本？

邮箱追踪器-有效，但在Gmail客户端中是否可以显示问号图标以外的其他内容？

让多对图像在各自的div中叠加

如何在用css使用网格视图时设置宽度？

为什么根捕获上的`min-height`溢出，而`height`没有？

Html视频标签：圆角像素化

如何使背景图像在面包屑中相互重叠

Flex：第一个 div 有列，下一个 div 有行

如何在悬停时使用 CSS 更改许多同级元素

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签，如何将其删除到手机上以使其响应？

如何正确地嵌套Flexbox

网页设计不适合移动设备

如何向上移动图像并溢出图像的一部分而另一部分不溢出

svg 内容超过元素

标题之间和之后的 Hr 线