为什么 SVG 和文本不能在 Windows Phone 浏览器上呈现？

Question

问题出在我的博客 My Blog 如果您在桌面浏览器上打开它，徽标 SVG 图标 和文本 PORTFOLIO 渲染得很好，如我所愿。但是当我在任何移动浏览器上打开这个博客时，SVG 和 PORTFOLIO 都没有显示。

WindowsPhone:

的不同移动浏览器打开移动网站的屏幕截图

UC 浏览器

Google 搜索（Google Inc. 的应用程序）

探索者

移动浏览器可能不支持 SVG，但为什么不显示 PORTFOLIO？

有没有可能是SVG代码有标记错误？我刚刚从 Illustrator 中保存了它。

这是代码（请在我的博客上检查元素以获取更多详细信息）：

 <div class='titlewrapper'><div id='titleimage'><a href='http://vkcreativework.blogspot.com'>
    <svg style='enable-background:new 0 0 376.8 442;' version='1.1' viewBox='0 0 376.8 442' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
        <style type='text/css'>
            .st0{display:none;fill:#00A99D;}
            .st1{enable-background:new    ;}
            .st2{fill:#2A2A2A;}
            .st3{clip-path:url(#SVGID_2_);enable-background:new    ;}
            .st4{fill:#313131;}
            .st5{fill:#FEFEFE;}
            .st6{clip-path:url(#SVGID_4_);enable-background:new    ;}
        </style>
        <g id='Layer_2'>
            <rect class='st0' height='563' width='654' x='-126.8' y='-42'/>
        </g>
        <g id='Layer_4'>
            <g>
                <g>
                    <g>
                        <g class='st1'>
                            <g>
                                <rect class='st2' height='152.7' transform='matrix(-0.7069 -0.7073 0.7073 -0.7069 -40.7001 753.0775)' width='2.5' x='134.5' y='308.6'/>
                            </g>
                            <g>
                                <rect class='st2' height='101.8' transform='matrix(-0.7069 -0.7073 0.7073 -0.7069 284.2971 923.7317)' width='2.5' x='332.3' y='352'/>
                            </g>
                            <g class='st1'>
                                <defs>
                                    <path class='st1' d='M261.9,259.2l1.7,1.7c27.4,27.4,102,102.2,106.8,106.9l-1.7-1.7         C363.9,361.3,289.3,286.6,261.9,259.2z' id='SVGID_1_'/>
                                </defs>
                                <clipPath id='SVGID_2_'>
                                    <use style='overflow:visible;' xlink:href='#SVGID_1_'/>
                                </clipPath>
                                <g class='st3'>
                                    <path class='st4' d='M261.9,259.2l1.7,1.7c27.4,27.4,102,102.2,106.8,106.9l-1.7-1.7C363.9,361.3,289.3,286.6,261.9,259.2'/>
                                </g>
                            </g>
                            <g>
                                <path class='st5' d='M226.7,237.1c4.6,0,8.8,1,13.2,3.1c4.4,2.1,8.3,5.8,12.1,9c0.3,0.3,111,111.1,116.8,116.9l-72,72        L188.8,330.1L80.8,438.1l-36.9-36.9l136.5-135.8c8.5-8.5,17.4-16,27.4-22.6c4.6-3,9.8-5,15.4-5.5        C224.4,237.1,225.5,237.1,226.7,237.1z'/>
                            </g>
                        </g>
                    </g>
                </g>
                <g>
                    <g>
                        <g class='st1'>
                            <g>
                                <polygon class='st2' points='78.6,6.2 80.3,8 80.1,223.9 78.3,222.1       '/>
                            </g>
                            <g>
                                <polygon class='st2' points='155.4,219.4 157.1,221.1 9.9,367.8 8.2,366       '/>
                            </g>
                            <g class='st1'>
                                <defs>
                                    <path class='st1' d='M257.5,190.3l1.7,1.7c-4.1-1.7-7.8-3.1-11.6-4.2c-7.1-2.1-14.4-3.1-21.8-3.1         c-3.4,0-6.7,0.2-10,0.6c-10.8,1.4-21.2,5-30.5,10.7c-8.3,5-15.2,11.8-22,18.7c-2.1,2.1-4.1,4.2-6.2,6.3l-1.7-1.7         c2.1-2.1,4.1-4.2,6.2-6.3c6.8-6.9,13.8-13.7,22-18.7c9.3-5.6,19.7-9.3,30.5-10.7c3.3-0.4,6.7-0.6,10-0.6         c7.4,0,14.7,1,21.8,3.1C249.7,187.2,253.4,188.6,257.5,190.3z' id='SVGID_3_'/>
                                </defs>
                                <clipPath id='SVGID_4_'>
                                    <use style='overflow:visible;' xlink:href='#SVGID_3_'/>
                                </clipPath>
                                <g class='st6'>
                                    <path class='st4' d='M257.5,190.3l1.7,1.7c-4.1-1.7-7.8-3.1-11.6-4.2c-7.1-2.1-14.4-3.1-21.8-3.1c-3.4,0-6.7,0.2-10,0.6         c-10.8,1.4-21.2,5-30.5,10.7c-8.3,5-15.2,11.8-22,18.7c-2.1,2.1-4.1,4.2-6.2,6.3l-1.7-1.7c2.1-2.1,4.1-4.2,6.2-6.3         c6.8-6.9,13.8-13.7,22-18.7c9.3-5.6,19.7-9.3,30.5-10.7c3.3-0.4,6.7-0.6,10-0.6c7.4,0,14.7,1,21.8,3.1         C249.7,187.2,253.4,188.6,257.5,190.3'/>
                                </g>
                            </g>
                            <g>
                                <polygon class='st2' points='368.7,78.2 370.5,79.9 259.2,192 257.5,190.3       '/>
                            </g>
                            <g>
                                <path class='st5' d='M296,6.2l72.8,72L257.5,190.3c-4.1-1.7-7.8-3.1-11.6-4.2c-7.1-2.1-14.4-3.1-21.8-3.1        c-3.4,0-6.7,0.2-10,0.6c-10.8,1.4-21.2,5-30.5,10.7c-8.3,5-15.2,11.8-22,18.7c-2.1,2.1-4.1,4.2-6.2,6.3L8.2,366L7.6,78.2        l71-72l-0.3,215.9L296,6.2z'/>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg>
    <span id='titletext'>PORTFOLIO</span></a>
 </div>

Answer 1

我注意到，对于您的 SVG 徽标，您只指定了宽度。如果您不指定宽度和高度，IE 会出现缩放问题。因此，尝试为 height 添加一个值，看看是否会有所不同。

我对UC浏览器不是很了解。我找不到关于它是否支持 SVG 的任何明确信息。我找到的一页说没有，另一页说有。我也不知道它在 WP 上使用什么引擎。如果它使用 IE 引擎，那么它可能会受到同样问题的影响。

为什么 SVG 和文本不能在 Windows Phone 浏览器上呈现？

Why isn't SVG and Text rendering on Windows Phone browsers?

html

css

svg

blogger