滤镜效果溢出来了

Question

考虑一个带有一些凸起文本的

div

和一个

filter

。

filter

仅限于

100%×100%

的

objectBoundingBox

。

但是，当我们应用

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

来控制（特定文本字符可以更改行高吗？）

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

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

@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

将 line box 的高度定义为小于 content 区域。

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