Question

我正在开发一个移动网站项目，并决定使用SVG作为徽标来绕过图像/屏幕像素密度问题。

svg代码在ios和chrome上的渲染很好但是由于某些原因在我的Android 4.0.3本机浏览器即'Internet'应用程序中，它不会渲染。它占据了它应该占据的空间，但没有任何东西在空间中绘制。

这是一个小提示，显示我的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%;
}

Answer 1

使用object元素是使用SVG（图像）的第二种最佳方式。不幸的是，Safari中存在恼人的高度错误。

到目前为止，我发现的最好或最强大的方法是在图像标记中使用SVG！

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

您还可以使用数据网址并包含SVG文件Base64编码，这样可以保存HTTP请求。

DEMO

Android 4.0.3浏览器SVG渲染问题

1 个答案: