SVG 過濾器在 iOS-Safari 上消失

Question

在iOS Safari中，第二個rect消失了，為什么？ 我希望它能在 iOS 中正確顯示。

 <svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%"> <feGaussianBlur stdDeviation="1.5"></feGaussianBlur> <feComponentTransfer result="blur"> <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA> </feComponentTransfer> <feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood> <feComposite in="color" in2="blur" operator="in" result="glow"></feComposite> <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur> <feOffset dx="0" dy="0"></feOffset> <feComponentTransfer result="shadow"> <feFuncR type="table" tableValues="1 1"></feFuncR> <feFuncG type="table" tableValues="0.67 0.67"></feFuncG> <feFuncB type="table" tableValues="0.21 0.21"></feFuncB> <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA> </feComponentTransfer> <feComposite in="glow" in2="shadow" operator="over" result="highlight" /> <feComposite in="SourceGraphic" in2="highlight" operator="over" /> </filter> </defs> <g transform="translate(0,25)"> <rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect> <rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect> </g> </svg>

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
</head>
<body>
    <svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
                <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
                <feComponentTransfer result="blur">
                    <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
                </feComponentTransfer>
                <feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
                <feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
                <feOffset dx="0" dy="0"></feOffset>
                <feComponentTransfer result="shadow">
                    <feFuncR type="table" tableValues="1 1"></feFuncR>
                    <feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
                    <feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
                    <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
                </feComponentTransfer>
                <feComposite in="glow" in2="shadow" operator="over" result="highlight" />
                <feComposite in="SourceGraphic" in2="highlight" operator="over" />
            </filter>
        </defs>

        <g transform="translate(0,25)">
            <rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>

            <rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
        </g>
    </svg>
</body>
</html>

chrome在此處輸入圖片描述

iOS Safari在此輸入圖片描述

我希望它能在 iOS 中正確顯示

Answer 1

iOS 有很多 memory 的優化。 您的第二個 rect 非常大，大部分位於初始 viewBox 之外，因此 iOS 不會渲染過濾器，因為它占用了太多 memory 用於離屏渲染。

當您更改矩形的高度時（我使用的是 iPhone 12 Pro (128GB)，iOS 16.1.1），第二個矩形恰好在height = "6473"處消失 - 因此此過濾器支持的最大矩形高度為 6472在我的手機上。

這是否有意義 - 可能沒有，但歡迎來到 Apple 的 web 團隊。

SVG 過濾器在 iOS-Safari 上消失

問題描述

1 個解決方案

解決方案1
3 2023-01-10 20:54:03

SVG 過濾器在 iOS-Safari 上消失

問題描述

1 個解決方案

解決方案1 3 2023-01-10 20:54:03

解決方案1
3 2023-01-10 20:54:03