html - SVG 图像不会在 iOS8 上调整大小

Question

我有带有 PNG 回退的 SVG 图片:

 <svg width=64 height=64>
  <image xlink:href="gender-male.svg"
   src="gender-male.png" width="100%" height="100%"> </image>
 </svg>

当我通过 CSS 为外部 SVG 设置不同的大小时，它会在所有浏览器上正确调整内部图像的大小:

 svg.small {
   width: 50px;
   height: 50px;
 }

但在 iOS8 上，内部图像不会缩放并保持原始大小:

演示:jsfiddle

我已经尝试过对 SVG header 进行各种更改:

<svg preserveAspectRatio="xMidYMin"
     x="0px" y="0px" width="283px" height="283px" 
     viewBox="0 0 283.5 283.5" 
     enable-background="new 0 0 283.5 283.5" xml:space="preserve">

另一张图片:

<svg preserveAspectRatio="xMidYMin meet"
     x="0px" y="0px"
     viewBox="0 0 283.5 283.5" 
     enable-background="new 0 0 283.5 283.5" xml:space="preserve">

还有用于图像的各种 CSS 方法( max-width 、 absolute position 等)，但似乎没有任何效果。连setting the size in JS不起作用。

还有其他想法吗？

Answer 1

Solution其实很简单，但你必须知道问题是什么。

问题是，外部 SVG 元素根据其 CSS 属性调整大小，但内部 IMAGE 是根据 HTML 属性 width< 呈现的 和 高度。

要使其正确呈现，您只需在每次元素的实际大小发生变化时更改 HTML 大小属性:

    if ((-1 < navigator.userAgent.indexOf('iPhone')
      || -1 < navigator.userAgent.indexOf('iPad'))
      && window.navigator.userAgent.match(new RegExp('OS ([1-8])_'))) {
     //iOS8 and older cannot correctly resize SVG graphic inside element resized by CSS

        $(window).on('resize.svg-size', function() {
            $('svg').each(function() {
                var me = $(this);

                //if height is set to auto, you may need to fix it first
                me.css('height', me.width() * me.data('ratio'));

                //set HTML attributes to current size defined in CSS
                me.attr('width', me.width());
                me.attr('height', me.height());

                //if there is also another container, fix it as well
                me.parent().height(me.parent().width() * me.data('ratio'));
            });
        });
        //call the handler when the page is loaded
        $(function() { $(window).triggerHandler('resize.svg-size'); });
    } //Fix for gender select size on iOS8 and older

HTML(外部 DIV 是可选的):

<div class="image-container">    
  <svg width=64 height=64 data-ratio=1><!-- square image -->
      <image xlink:href="gender-male.svg"
             src="gender-male.png" width="100%" height="100%"> </image>
  </svg>
</div>
<div class="image-container">    
  <svg width=100 height=75 data-ratio="0.75"><!-- 4:3 image -->
      <image xlink:href="gender-female.svg"
             src="gender-female.png" width="100%" height="100%"> </image>
  </svg>
</div>