使用CSS3的SVG投影

小编典典

使用CSS3的SVG投影

html

是否可以使用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>

阅读 813

2020-05-10

共1个答案

小编典典

这是一个使用’filter’属性将dropshadow应用于某些svg的示例。如果要控制阴影的不透明度，请查看此示例。该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被定义为可以在CSSbox上工作（阅读：矩形），而svg比矩形更具表现力。阅读SVG入门)，进一步了解SVG过滤器的功能。

2020-05-10