1

如果浏览器支持,我想在我正在开发的网站上使用 SVG 徽标。所以我有<img src="logo.gif" />我的 HTML,然后如果浏览器支持 SVG,我将src属性交换为logo.svg.

这在我尝试过的所有设备上看起来都很棒,除了几年没有更新软件的第一代 iPad(它在 iOS 5.1.1 上)。基本上标志的顶部和底部有一个巨大的差距,我不知道为什么。在装有 iOS 6.0.2 的 iPhone 5 上看起来不错,所以我认为这是 iOS 5 及更低版本的问题。

我的 logo.svg 文件

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" viewBox="83.323 19.623 445 109" xml:space="preserve">
<polygon fill="#339846" points="121.805,77.839 124.066,86.185 125.199,94.741 125.481,103.087 125.128,110.724 124.42,117.372 
    123.572,122.604 122.936,126.068 122.654,127.271 126.826,121.333 127.815,125.364 129.229,117.159 129.867,109.379 
    129.937,102.097 129.512,95.308 128.806,89.297 127.887,83.992 126.826,79.608 125.905,76.215 125.836,76.285 125.623,76.496 
    125.34,76.709 124.846,76.992 124.278,77.345 123.572,77.558 122.724,77.77 121.805,77.839 "/>
<path fill="#FDCC09" d="M106.488,22.559l-0.14-0.496l1.344,0.354l1.201,0.426l1.201,0.564l1.061,0.637l0.991,0.707l0.919,0.708
    l0.85,0.707l0.777,0.707l0.141,2.052l-0.071,1.132l-0.142,0.989l-0.354,1.557l-0.069-0.071l-0.214-0.213l-0.423-0.283l-0.566-0.495
    l-0.777-0.637l-1.062-0.777l-1.272-0.92l-1.626-1.061l-0.708-2.333l-0.636-1.908L106.488,22.559z M89.121,39.501l0.638,2.191
    l0.424,0.284l0.425,0.284l0.425,0.211l0.425,0.283l0.495,0.283l0.424,0.212l0.424,0.213l0.425,0.212l-0.071-1.981l0.071-1.979
    l0.141-1.91l0.283-1.908l-0.849-0.92l-0.848-0.849l-0.778-0.778l-0.637-0.707l-0.565-0.565l-0.495-0.495l-0.283-0.283l-0.072-0.07
    l-0.563,2.97l0.069,2.758L89.121,39.501z M122.472,66.818l-0.496-2.687l-0.707-2.759l-1.131-2.546l-1.556-2.262l-0.213-0.283
    l-0.707-0.778l-0.92-1.273l-1.061-1.556l-1.062-1.837l-0.989-1.98l-0.707-2.052l-0.353-2.052l0.14-2.191l0.425-2.192l0.495-2.334
    l0.566-2.475l-1.203-0.99l-1.272-0.849l-1.272-0.849l-1.272-0.777l-1.273-0.708l-1.272-0.636l-1.272-0.566l-1.204-0.495l-1.06-0.425
    l-1.062-0.423l-0.849-0.354l-0.777-0.213l-0.708-0.211l-0.424-0.142l-0.354-0.142h-0.069l-0.777,1.697l-0.637,2.121l-0.637,2.475
    l-0.496,2.617l-0.353,2.546l-0.283,2.334l-0.142,1.98v1.344l1.273,0.565l1.273,0.495l1.201,0.495l1.202,0.424l1.202,0.496
    l1.131,0.495l1.062,0.637l0.99,0.637l1.556,1.414l1.273,1.697l1.201,1.909l0.92,1.838l0.707,1.769l0.566,1.484l0.283,0.99
    l0.141,0.353l0.707,1.981l0.989,1.98l1.274,1.839l1.413,1.838l1.557,1.696l1.697,1.557l1.696,1.414l1.768,1.273l0.072-0.99
    l0.07-1.697l-0.07-2.192L122.472,66.818z M136.039,50.604l-1.062-4.386l-1.696-4.242l-2.193-3.96l-2.545-3.749l-2.688-3.394
    l-2.757-3.04l-2.617-2.617l-2.263-2.122l-1.838-1.556l-1.273-0.989l-0.425-0.354l1.838,3.96l0.921,3.536l0.212,3.253l-0.212,2.97
    l-0.496,2.758l-0.637,2.546l-0.423,2.475l-0.142,2.334l0.354,2.051l0.777,2.051l0.918,1.98l1.133,1.838l1.062,1.556l0.919,1.272
    l0.708,0.779l0.212,0.282l1.626,2.475l1.132,2.688l0.707,2.899l0.354,2.758l0.141,2.475v2.051l-0.069,1.344l-0.072,0.496
    l4.668-4.385l3.254-4.455l1.908-4.598l0.777-4.526L136.039,50.604z M118.683,74.71l-1.485-1.204l-1.769-1.626l-1.838-1.908
    l-1.769-2.263l-1.556-2.547l-1.062-2.686l-0.069-0.354l-0.354-0.989l-0.496-1.486l-0.776-1.769l-0.921-1.909l-1.131-1.909
    l-1.344-1.768l-1.557-1.415l-0.989-0.636l-1.061-0.566l-1.061-0.496l-1.203-0.424l-1.2-0.425l-1.273-0.495l-1.273-0.495
    l-1.272-0.565l-1.272-0.708l-1.345-0.777l-1.272-0.92l-1.272-1.06l-1.274-1.273l-1.202-1.485l-1.131-1.768l-1.132-1.979v0.565
    l0.142,1.556l0.211,2.475l0.426,3.111l0.636,3.678l0.92,4.03l1.201,4.173l1.557,4.243l2.05,4.103l2.476,3.746l2.97,3.395
    l3.536,2.688l4.102,1.91l4.809,0.918l5.516-0.211l6.223-1.485l-0.352-0.283L118.683,74.71z"/>
<path fill="#339846" d="M181.058,59.69c-5.656,0-10.842,2.452-14.237,6.506h-0.189l5.47-26.307h-13.672l-9.336,46.579
    c-0.564,2.829-1.037,5.658-1.037,8.486c0,8.203,5.47,12.918,16.407,12.918c20.743,0,30.55-17.16,30.55-32.152
    C195.014,67.517,190.676,59.69,181.058,59.69z M167.292,97.595c-3.111,0-5.092-1.79-5.186-5.091
    c-0.095-1.981,0.188-3.584,0.471-5.092l0.849-3.771c1.603-8.016,6.412-13.013,11.314-13.013c4.148,0,6.034,3.489,6.034,8.015
    C180.774,86.657,175.118,97.595,167.292,97.595z M227.354,59.69c-16.406,0-27.533,13.106-27.533,29.136
    c0,11.409,7.826,19.047,19.519,19.047c16.029,0,27.533-12.353,27.533-29.23C246.872,68.177,239.705,59.69,227.354,59.69z
     M221.225,97.501c-4.714,0-7.354-3.584-7.354-8.958c-0.094-7.166,3.865-18.574,11.691-18.574c5.47,0,7.261,4.525,7.261,8.769
    C232.822,86.657,228.674,97.501,221.225,97.501z M290.997,39.89l-3.959,20.839c-1.981-0.755-4.432-1.038-6.317-1.038
    c-17.445,0-29.043,14.71-29.043,30.738c0,11.222,6.506,17.444,14.332,17.444c5.375,0,11.033-2.357,15.087-8.486h0.188l-0.66,7.449
    h12.447c0.188-5.468,1.037-12.068,2.168-17.916l9.334-49.03H290.997z M282.7,84.018c-1.791,8.768-6.601,12.917-10.466,12.917
    c-3.961,0-6.413-3.11-6.413-8.674c0-8.863,5.752-18.292,13.862-18.292c2.263,0,4.337,0.754,5.374,1.603L282.7,84.018z
     M351.155,60.729l-16.502,33.095c-6.128,12.258-11.597,20.65-17.727,26.402c-5.374,5.092-11.786,7.354-14.805,7.825l-3.016-11.598
    c2.168-0.659,5.186-1.791,7.825-3.676c3.112-2.17,5.752-4.904,7.449-8.017c0.472-0.659,0.472-1.226,0.283-2.264l-9.146-41.769
    h14.331l2.83,20.083c0.66,4.714,1.132,8.015,1.51,10.938h0.188c1.037-2.735,2.074-5.752,4.053-10.749l8.393-20.272H351.155
    L351.155,60.729z M380.384,79.68l12.823,27.156h-15.086l-8.108-19.707l-5.092,4.903l-2.829,14.804h-13.484l12.636-66.946h13.482
    l-7.542,40.073h0.188c1.414-1.791,2.829-3.583,4.149-5.28l11.787-13.955h16.688L380.384,79.68z M406.784,60.729h13.578l-8.77,46.107
    h-13.578L406.784,60.729z M423.286,47.339c0,4.809-3.679,7.638-8.015,7.638h-0.095c-3.677,0-6.506-2.546-6.506-6.6
    c0.095-4.622,3.677-7.732,7.826-7.732C420.457,40.644,423.286,43.284,423.286,47.339z M469.677,72.23
    c0,2.075-0.379,5.562-0.753,7.826l-5.093,26.779h-13.578l4.809-25.553c0.283-1.604,0.471-3.489,0.471-5.187
    c0-3.205-1.132-5.469-4.525-5.469c-4.432,0-9.618,5.562-11.504,15.747l-3.866,20.461h-13.578l5.847-31.117
    c1.131-5.845,1.886-10.937,2.452-14.99h12.068l-0.942,7.637h0.188c4.337-6.035,10.09-8.675,16.217-8.675
    C465.434,59.69,469.677,64.312,469.677,72.23z M514.748,39.89l-3.962,20.839c-1.979-0.755-4.431-1.038-6.318-1.038
    c-17.443,0-29.041,14.71-29.041,30.738c0,11.222,6.505,17.444,14.332,17.444c5.374,0,11.032-2.357,15.087-8.486h0.188l-0.659,7.449
    h12.445c0.188-5.468,1.037-12.068,2.169-17.916l9.334-49.03H514.748z M506.449,84.018c-1.792,8.768-6.601,12.917-10.466,12.917
    c-3.962,0-6.413-3.11-6.413-8.674c0-8.863,5.752-18.292,13.86-18.292c2.264,0,4.339,0.754,5.377,1.603L506.449,84.018z"/>
</svg>

我的网站是响应式的,所以我没有在我的 HTML 或 SVG 中提及高度或宽度,然后我img { max-width:100%; }在我的 CSS 中进行了设置。有谁知道这可能是什么原因以及我该如何解决?

4

1 回答 1

1

我在我正在处理的一个网站上遇到了类似的问题。它与在 SVG 元素上设置宽度但没有高度有关,因此它不会使用合理的高度,而是将 SVG 的高度基于文档的主体。为了解决这个问题,您可以对 IOS 设备使用 1% hack。

svg{
  height: 1%;
}

到目前为止,我已经在所有现代浏览器和设备上对此进行了测试,结果符合预期。

于 2014-11-27T17:16:57.860 回答