Question

SVG 精灵未在 ios iphone ipad 上显示。

在 Android 和 PC 上，一切正常。但是在 iphone、ipad 上 - 只是白屏，如何解决？

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 1080 700" style="enable-background:new 0 0 1080 700;" xml:space="preserve">
                <g>
                    <path class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1
                        c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13
                        c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8
                        c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10
                        c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7
                        c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3
                        c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/>
                </g>
                <g>
                    <path class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9
                        c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4
                        c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3
                        c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9
                        c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5
                        c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3
                        c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4
                        c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3
                        c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6
                        c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8
                        c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5
                        c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5
                        c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9
                        c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1
                        c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2
                        c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8
                        c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13
                        c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/>
                </g>
            </svg>

Answer 1

尝试从 SVG 标头中删除 style =" enable-background: new 0 0 1080 700; " xml: space = "preserve"

现代浏览器目前无法处理此问题。

明确指定填充颜色 - <path fill="dodgerblue"

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1080 700">
                <g>
                    <path fill="dodgerblue" class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1
                        c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13
                        c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8
                        c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10
                        c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7
                        c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3
                        c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/>
                </g>
                <g>
                    <path fill="dodgerblue" class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9
                        c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4
                        c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3
                        c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9
                        c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5
                        c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3
                        c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4
                        c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3
                        c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6
                        c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8
                        c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5
                        c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5
                        c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9
                        c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1
                        c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2
                        c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8
                        c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13
                        c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/>
                </g>
            </svg>

Answer 2

您不能在低于 13 的 iOS 操作系统中显示 .svg 图像。来自 Apple 的 Xcode 12 发行说明：

<块引用>

资产目录新功能增加了对可缩放矢量图形的支持 (SVG) 图像资产。这些保留了它们的向量表示 macOS 10.15 或更高版本、iOS 13 或更高版本的部署目标，以及 iPadOS 13 或更高版本。 (18389814)

但是您可以使用库，例如：https://github.com/mchoe/SwiftSVG。但这并不能保证加载所有类型的 svg 图像。

SVG 精灵未在 ios iphone ipad 上显示

2 个答案: