css 过滤效果溢出

g2ieeal7 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(102)

考虑一个div和一个filter，filter被限制为objectBoundingBox的100%×100%。
然而，当我们应用feFlood时，我们可以看到它是如何溢出到元素的padding-box（与border-box相同）之外的。为什么？
(the 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 }

个字符
这似乎取决于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>

的字符串

css

来源：https://stackoverflow.com/questions/77783213/filter-effect-is-spilling-out

1条答案

按热度按时间

uhry853o1#

我觉得这和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}

个字符
正如您所看到的，在所有情况下，内容区域都溢出了div，因为您的line-height将行框的高度定义为小于内容区域。
不确定你是否可以改变SVG过滤器的行为，但我确信你不能控制那个内容区域。

赞(0）回复(0）举报 2024-01-09

我来回答

css 过滤效果溢出

1条答案

相关问题

热门标签

最新问答