You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

应用feTurbulence滤镜后SVG矩形显示尺寸异常增大求助

SVG滤镜导致元素尺寸与位置异常
<svg width='400' height='300' xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="filterGalv">
      <feTurbulence type="fractalNoise" baseFrequency="27.4 49.7" seed='37.4' />
      <feColorMatrix type='saturate' values="0.05" />

    </filter>
    <filter id="filterWood">
      <feTurbulence type="fractalNoise" baseFrequency="0.01 17.4" />
      <feColorMatrix values="0 0 0 .31 .5
                                   0 0 0 .29 .3
                                   0 0 0 .28 .1
                                   0 0 0 0 1" />
    </filter>

    <mask id="cutoutMask">
      <rect x='160' y='140' width='80' height='50' fill="white" />
      <!--black is the default alpha channel-->
      <circle cx="200" cy="165" r="10" fill="black" />
    </mask>

  </defs>

  <rect x="20" y="140" width='360' height='50' filter="url(#filterWood)" />
  <rect x="160" y="140" width='80' height='50' mask="url(#cutoutMask)" fill="#efefef" />
  <rect x="160" y="140" width='80' height='50' mask="url(#cutoutMask)" filter="url(#filterGalv)" />

</svg>

灰色矩形的尺寸显示正确。应用filterWood滤镜的棕色矩形,本该保持高度50、宽度360、起始位置x='20',但实际显示不符合预期。

尝试将所有单位改为精确单位(mm、px)后,问题反而变得更严重。

内容的提问来源于stack exchange,提问作者BillH

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.12 11:42:48