Question

问题在于我的博客My Blog如果您在桌面浏览器上打开它，徽标 SVG图标和文字 PORTFOLIO 可以正常呈现，如我所愿。但是当我在任何移动浏览器上打开这个博客时，既不会显示SVG也不会显示PORTFOLIO。

在 Windows Phone ：

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

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引擎，那么它可能会受到相同问题的影响。

为什么在Windows Phone浏览器上没有SVG和文本渲染？

1 个答案: