2013-05-17 8 views
0

Я работаю над проектом мобильного веб-сайта и решил использовать SVG для логотипа, чтобы обходить проблемы плотности пикселей изображения/экрана.Android 4.0.3 Проблемы с отображением SVG SVG

Код svg отлично подходит для ios и chrome на Android, но по какой-то причине в моем браузере 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%; 
} 
+0

Edit: я должен был вложить его в качестве тега, а затем удалить атрибуты ширину и высоту из корневого тега SVG в файле. Это работает для меня в браузере iOS android и хром для Android. Хотя я все еще открыт для лучших идей. – Kobby

ответ

0

Использованием object элемента является вторым лучшим путем к используйте SVG (изображения). К сожалению, в Safari есть раздражающая ошибка роста.

Лучший или самый надежный способ, который я нашел до сих пор, - использовать SVG в теге изображения!

<img src="<path to image .svg>" alt="my SVG image"> 

Вы также можете использовать URL-адрес данных и включить в свой файл SVG Base64 кодировку, которая сохраняет HTTP-запрос.

DEMO