为什么Windows Phone浏览器上没有SVG和文本呈现？ [英] Why isn't SVG and Text rendering on Windows Phone browsers?
本文介绍了为什么Windows Phone浏览器上没有SVG和文本呈现？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题出在我的博客
- Google搜索（Google Inc.的应用程序）
- 资源管理器
移动浏览器可能不支持SVG，但为什么不显示PORTFOLIO？
SVG代码有标记错误？
这里是代码（请在我的博客上检查元素以获取更多详细信息）：
< 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.91-1.7-1.7 C363.9,361.3,289.3,286.6,261.9,259.2 z'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.91-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.91-72,72 L188.8,330.1L80.8,438.11-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.31-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.31-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.2l71-72l-0.3,215.9L296,6.2z'/>
< / g>
< / g>
< / g>
< / g>
< / g>
< / g>
< / svg>
< span id ='titletext'> PORTFOLIO< / span>< / a>
< / div>
解决方案
我注意到，对于您的SVG标志，指定宽度。如果不指定宽度和高度，IE会出现扩展问题。因此，尝试为 height 添加一个值，然后看看是否有区别。
我不知道UC浏览器。我找不到任何关于是否支持SVG的确定信息。我发现一个页面说它没有，另一个说，它。我不知道它在WP上使用什么引擎。如果它使用IE引擎，那么它可能会受到同一问题的影响。
The problem is with my blog My Blog If you open it on desktop browser, the Logo SVG Icon and Text PORTFOLIO render fine, as I want. But when I open this blog on any Mobile browser, neither SVG nor PORTFOLIO are displayed.
Screenshots of Mobile site opened in different Mobile browsers of Windows Phone:
- UC Browser
- Google Search (An app by Google Inc.)
- Explorer
It might be possible that Mobile browsers don't support SVG but why isn't PORTFOLIO being displayed?
Is it possible that SVG code has markup mistakes? I just saved it from Illustrator.
Here's the code (please do Inspect Element on My blog to get more details):
<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>
解决方案
I noticed that for your SVG logo, you have only specified a width. IE has scaling issues if you don't specify both a width and a height. So try adding a value for height and see if that makes a difference.
I don't know much about the UC Browser. I couldn't find any definitive information on whether it supports SVG or not. One page I found said it didn't and another said it did. I don't know what engine it uses on WP either. If it uses the IE engine, then it could be affected by the same issue.
这篇关于为什么Windows Phone浏览器上没有SVG和文本呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
