Question

我使用一些SVG作为伪内容的背景图片，如下所示：

a:after {
    content: url('../images/icon_candidate_grey.png');
    content: url('../images/svg/person.svg');
    width: 100px;
    left: 50%;
    margin-left: -50px;
    background: transparent;
}

我想在可识别它的那些浏览器中对SVG应用阴影滤镜。我到目前为止这样做了：

a:hover:after {     
    filter: url('../images/svg/filters.xml#drop-shadow');
    -webkit-filter: drop-shadow( 0 0 10px #999 );
}

-webkit-filter：声明适用于Chrome，filter: url声明适用于Firefox。这有点不稳定（我可以在Chrome中为过滤器属性设置动画，但不能为Firefox设置动画），但大多数都是好的。

问题是在Chrome中模糊的边缘被切断，因为模糊比原始SVG图像大。这在Firefox中不会发生，因为在filter: url中我可以定义宽度和宽度。我的过滤器的高度，为模糊提供足够的空间，而不会被切断。看起来像这样，设置宽度和宽度。滤镜的高度为原始图像尺寸的140％：

 <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="8" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="0"/>
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
                   values="0 0 0 0   0
                  0 0 0 0   0
                  0 0 0 0   0
                  0 0 0 .4 0"/>
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
</filter>

但我无法找到有关如何从CSS -webkit-filter: declaration-设置此信息的任何信息，因此在Chrome中，过滤器的大小与图像相同，并且模糊会被切断。

如何定义宽度和宽度？ -webkit-filter的高度属性？

Answer 1

不幸的是，您无法更改webkit过滤器区域的大小。但您可以通过webkit过滤器中的SVG陷门重新使用您的投影定义：

-webkit-filter: url(../images/svg/filters.xml#drop-shadow);

您还可以使用SMIL或JavaScript为您的过滤器设置动画，如下所示：

<feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="0">
   <animate attributeName="stdDeviation" from="0" to="8" dur="8s"/>
</feGaussianBlur>

设置SVG滤波器宽度＆amp; CSS过滤器声明的高度

1 个答案: