阻止 SVG feSpecularLighting 滤镜填充外部元素

发布于 2024-12-10 13:48:47 字数 1436 浏览 0 评论 0 原文

我正在 Chrome 和 Firefox 中进行开发，但我在使用 SVG 过滤器时遇到了问题。当应用于矩形时，它似乎不仅仅影响元素。下面是结果的屏幕截图。正如您所看到的，它在之外着色，这是不希望的。

下面是 Chrome 中的结果： Undesired result in Chrome

下面是 Firefox 中的结果： 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>

原文

I am developing in Chrome and Firefox and I've been having trouble with an SVG filter. when applied to a rect it seems to affect more than just the <rect> element. Below is a screenshot of the result. As you can see it shades outside of the <rect> which is undesired.

Below is the result in Chrome:
undesired result in Chrome

Below is the result in 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可爱咩 2024-12-17 13:48:47

发生这种情况是因为默认的滤镜效果区域，由元素上的 >x、y、width 和 height 参数为边界框的 120%过滤后的元素，不是 100%。

规范明确：

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

不过，将其更改为 100% 仍会影响整个边界框，因此包括圆角之外的区域。如果您想将其限制为矩形，可以使用 feComposite< /代码>。例如

<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 中也不起作用。

This happens because the default filter effects region, as defined by the x, y, width and height parameters on the <filter> element, is 120% of the bounding box of the filtered element, not 100%.

The specification clarifies:

It is often necessary to provide padding space because the filter effect might impact bits slightly outside the tight-fitting bounding box on a given object. For these purposes, it is possible to provide negative percentage values for ‘x’ and ‘y’, and percentages values greater than 100% for ‘width’ and ‘height’. This, for example, is why the defaults for the filter effects region are x="-10%" y="-10%" width="120%" height="120%".

Changing this to 100% would still affect the entire bounding box, though, so including the areas outside the rounded corners of the <rect>. If you want to limit it to just the rectangle, you can use 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>

Also, you've nested the #I filter inside the #dropshadow filter. That's not something you can do. Are you trying to combine the lighting and drop shadow? If so, you could do that like this:

<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>

This doesn't seem to work to work in Firefox, though, but then your original example doesn't work in Firefox for me either.

回复收藏 0 原文

~没有更多了~