css - 滤镜效果正在溢出

Question

考虑一个带有一些凸起文本和一个过滤器的div。 过滤器仅限于objectBoundingBox的100%×100%。

但是，当我们应用 feFlood 时，我们可以看到它如何溢出到元素的 padding-box 之外(与 border-box 相同) >) 在这里。为什么？

(box-shadow 突出显示此处的边界)

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body {
    font: 900 8em/ 1 fjalla one, 
        sans-serif;
}

svg { position: fixed }

div {
    margin: .375em;
    box-shadow: inset 0 0 0 2px #00f; /* padding-box boundary highlight */
    background: #00f7 content-box;
    filter: url(#f)
}

div:nth-of-type(2n) { padding-bottom: 1lh }

<svg width="0" height="0">
  <filter id="f" primitiveUnits="objectBoundingBox" 
          x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00"/>
    <feBlend in="SourceGraphic"/>
  </filter>
</svg>
<div>HELLO</div>
<div>HELLO</div>

这似乎取决于line-height和所选的特定font-family(为什么？)，但改变它们不是 解决方案。

我该如何解决这个问题？当我想在一半高度上应用滤镜效果时，这尤其成问题，因为这个高度计算错误，这会引发后续错误计算滤镜效果的雪崩。

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body {
    font: 900 8em/ 1 fjalla one, 
        sans-serif;
}

svg { position: fixed }

div {
    margin: .375em;
    box-shadow: inset 0 0 0 2px #00f; /* padding-box boundary highlight */
    background: #00f7 content-box;
    filter: url(#f)
}

div:nth-of-type(2n) { padding-bottom: 1lh }

<svg width="0" height="0">
  <filter id="f" primitiveUnits="objectBoundingBox" 
          x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" height=".5"/>
    <feBlend in="SourceGraphic"/>
  </filter>
</svg>
<div>HELLO</div>
<div>HELLO</div>

Answer 1

我认为这与 SVG 无关。 SVG 过滤器适用于内容区域。该区域取决于字体属性，您无法通过更改 line-height 来控制它 ( Can specific text character change the line height? )

内容区域是您选择文本时看到的区域:

或者当您将背景应用于内联元素时:

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body {
    font: 900 8em/ 1 fjalla one, 
        sans-serif;
}

svg { position: fixed }

div {
    margin: .375em;
    box-shadow: inset 0 0 0 2px #00f; /* padding-box boundary highlight */
    background: #00f7 content-box;
    filter: url(#f)
}

div + div {filter:none}

div + div span {background :red}

<svg width="0" height="0">
  <filter id="f" primitiveUnits="objectBoundingBox" 
          x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00"/>
    <feBlend in="SourceGraphic"/>
  </filter>
</svg>
<div>HELLO</div>
<div><span>HELLO</span></div>

如您所见，在所有情况下，内容区域都会溢出 div，因为您的 line-height 将 行框 的高度定义为小于内容区域。

不确定您是否可以更改 SVG 过滤器的行为，但我确信您无法控制该内容区域。