我正在开发一个移动网站项目,并决定使用 SVG 作为徽标来绕过图像/屏幕像素密度问题。
svg 代码在 ios 和 android 上的 chrome 中呈现良好,但由于某种原因,在我的 Android 4.0.3 本机浏览器又名“互联网”应用程序上,它不呈现。它占用了它应该占用的空间,但没有任何东西在空间中绘制。
这是一个显示我的 svg 代码和我附加到它的 css 的小提琴。任何想法都会非常有帮助:http: //jsfiddle.net/vQsa5/1/
这是我的 svg 的代码
<svg version="1.1" id="logoImg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="380px" height="62px" viewBox="0 0 380 62" enable-background="accumulate" xml:space="preserve">
<g>
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="190.0005" y1="61.7227" x2="190.0005" y2="0.0649">
<stop offset="0" style="stop-color:#632C15"/>
<stop offset="0.0197" style="stop-color:#6E2B17"/>
<stop offset="0.09" style="stop-color:#8F271D"/>
<stop offset="0.1682" style="stop-color:#AC2322"/>
<stop offset="0.2549" style="stop-color:#C42127"/>
<stop offset="0.3535" style="stop-color:#D61F2A"/>
<stop offset="0.4714" style="stop-color:#E31D2C"/>
<stop offset="0.6276" style="stop-color:#EA1C2E"/>
<stop offset="0.9755" style="stop-color:#EC1C2E"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M356.526,21.217h-30.202v7.299h30.202c7.154,0.018,12.938,5.797,12.954,12.951
c-0.017,7.15-5.8,12.938-12.954,12.951h-30.185c-7.154-0.014-12.946-5.801-12.954-12.951V23.365
c0.017-8.82,7.162-15.967,15.988-15.979h26.771V0.086l-26.771-0.004c-8.076,0.004-15.188,4.115-19.368,10.359
c-3.896-6.215-10.782-10.352-18.66-10.355h-26.625c-12.171,0.004-22.031,9.865-22.039,22.029v19.049
c0,5.061,1.836,9.672,4.869,13.254h-36.071c-7.309-0.014-13.23-5.914-13.257-13.227c0,0,0-41.045,0-41.127h-7.3v6.404
c-4.172-3.943-9.792-6.383-15.989-6.387H148.16v7.305h26.775c8.818,0.021,15.972,7.158,15.989,15.984v18.1
c-0.018,7.146-5.801,12.934-12.955,12.947h-30.185c-7.154-0.014-12.946-5.801-12.959-12.947v-0.004h0.004v-0.025
c0.025-7.141,5.805-12.908,12.955-12.926h30.202v-7.299h-30.202c-4.935,0-9.447,1.762-12.959,4.684v-2.525
c0-12.859-10.425-23.285-23.285-23.289H89.873c-8.257,0-15.489,4.305-19.622,10.783C66.113,4.391,58.882,0.086,50.625,0.082
H23.857v7.305h26.767c8.727,0.012,15.795,6.994,15.972,15.691c0,0.096-0.018,0.193-0.018,0.297l0.034,18.092
c-0.013,7.15-5.805,12.938-12.95,12.951H23.474c-7.154-0.014-12.941-5.801-12.95-12.951c0.009-7.154,5.796-12.934,12.95-12.951
H53.68v-7.299H23.474c-11.183,0-20.255,9.059-20.255,20.25c0,11.188,9.072,20.25,20.255,20.256h30.189
c11.183-0.006,20.25-9.068,20.255-20.256l-0.004-18.102c0-0.076-0.013-0.158-0.013-0.24c0.146-8.709,7.228-15.717,15.972-15.738
h21.668c8.826,0.021,15.967,7.158,15.985,15.988v18.092l0,0v0.004c0,11.184,9.067,20.246,20.259,20.252h30.185
c6.912-0.006,13.023-3.479,16.678-8.779c3.715,5.305,9.869,8.773,16.833,8.779h81.349c6.973,0,13.118-3.475,16.833-8.779
c3.655,5.301,9.758,8.773,16.679,8.779h30.185c11.188-0.006,20.255-9.068,20.255-20.256
C376.781,30.275,367.715,21.217,356.526,21.217z M292.83,54.412h-29.59c-7.309-0.008-13.239-5.926-13.248-13.248V22.115
c0.009-8.131,6.594-14.707,14.73-14.729h26.625c8.146,0.021,14.722,6.598,14.739,14.729v19.049
C306.069,48.486,300.147,54.404,292.83,54.412z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="361.9355" y1="2.9004" x2="361.9355" y2="0.0977">
<stop offset="0" style="stop-color:#632C15"/>
<stop offset="0.0197" style="stop-color:#6E2B17"/>
<stop offset="0.09" style="stop-color:#8F271D"/>
<stop offset="0.1682" style="stop-color:#AC2322"/>
<stop offset="0.2549" style="stop-color:#C42127"/>
<stop offset="0.3535" style="stop-color:#D61F2A"/>
<stop offset="0.4714" style="stop-color:#E31D2C"/>
<stop offset="0.6276" style="stop-color:#EA1C2E"/>
<stop offset="0.9755" style="stop-color:#EC1C2E"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M357.794,0.75h1.438v2.129h0.646V0.75h1.414V0.098h-3.499V0.75z M366.077,2.9V1.275
c0-0.65-0.526-1.172-1.173-1.178h-2.017c-0.646,0.006-1.173,0.527-1.173,1.178V2.9h0.646V1.275c0-0.293,0.233-0.531,0.526-0.531
h0.672v2.148h0.646V0.744h0.698c0.293,0,0.526,0.238,0.526,0.531V2.9H366.077z"/>
</g>
</g>
</g>
</g>
</svg>
和我拥有的CSS
#logoImg{
width: 115px;
height: 50px;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
}