问题
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>
回答1:
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.
来源：https://stackoverflow.com/questions/39678361/why-isnt-svg-and-text-rendering-on-windows-phone-browsers