Question

我正在使用Chrome和Firefox进行开发，而且我一直遇到SVG过滤器问题。当应用于矩形时，它似乎不仅影响<rect>元素。以下是结果的屏幕截图。正如你所看到的那样，<rect>之外的阴影是不受欢迎的。

以下是Chrome中的结果： undesired result in Chrome

以下是Firefox中的结果： undesired result in FF

<?xml version="1.0" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="100%" height="100%">
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10"/> 
<feOffset dx="5" dy="5" result="offsetblur"/>
<feMerge> 
<feMergeNode/>
<feMergeNode in="SourceGraphic"/> 
</feMerge>

<filter id = "I">
<feSpecularLighting specularExponent="2" lighting-color="#F3F4F3">
<fePointLight x="300" y="100" z="100"/>
</feSpecularLighting>
</filter>
</filter>
</defs>

<rect x="33%" y="33%" rx="30" ry="30" width="33%" height="300px" style="fill:#FFFFFF; filter:url(#I)"></rect>

</svg>
</body>
</html>

Answer 1

这是因为默认filter effects region，由x元素上的y，width，height和<filter>参数定义，是过滤元素的边界框的120％，而不是100％。

规范澄清：

通常需要提供填充空间，因为滤镜效果可能会影响给定对象上紧密贴合边框外的位。出于这些目的，可以为“x”和“y”提供负百分比值，并为“宽度”和“高度”提供大于100％的百分比值。例如，这就是为什么滤镜效果区域的默认值为x =“ - 10％”y =“ - 10％”width =“120％”height =“120％”。

将此值更改为100％仍然会影响整个边界框，因此包括<rect>圆角之外的区域。如果要将其限制为仅包含矩形，可以使用feComposite。 E.g。

<filter id="I">
    <feSpecularLighting specularExponent="2" lighting-color="#F3F4F3" result="light">
        <fePointLight x="300" y="100" z="100"/>
    </feSpecularLighting>
    <feComposite in="light" in2="SourceAlpha" operator="in" result="lit"/>
</filter>

此外，您已嵌套#I过滤器内的#dropshadow过滤器。那不是你能做的。你想尝试结合照明和投影吗？如果是这样，你可以这样做：

<filter id="dropshadow">
    <feSpecularLighting specularExponent="2" lighting-color="#F3F4F3" result="light">
        <fePointLight x="300" y="100" z="100"/>
    </feSpecularLighting>
    <!-- Apply lighting inside rectangle -->
    <feComposite in="light" in2="SourceAlpha" operator="in" result="lit"/>

    <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
    <feOffset dx="5" dy="5" result="blur"/>
    <!-- Apply blur outside rectangle -->
    <feComposite in="blur" in2="SourceAlpha" operator="out" result="shadow"/>

    <!-- Combine lighting and shadow -->
    <feComposite in="shadow" in2="lit" operator="xor" />
</filter>

这似乎不适用于Firefox，但是你的原始示例在我的Firefox中也不起作用。

停止SVG feSpecularLighting过滤器填充<rect>元素</rect>外部

1 个答案: