html - 从 CSS 过滤器声明设置 SVG 过滤器宽度和高度

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>