应用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
相关产品推荐
相关产品推荐

