SVG图像在iOS8上无法调整大小

Question

I have SVG picture with PNG fallback:

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

When I set different size via CSS for the outer SVG, it resizes the inner image correctly on all browsers:

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

But on iOS8, the inner image does not scale and remains in original size:

Demo: jsfiddle

I've tried various changes in 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">

The other image:

<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">

And also various CSS methods ( max-width , absolute position , etc.) for the image but nothing seems to work. Even setting the size in JS does not work.

Any other ideas?

Answer 1

The Solution is actually pretty easy, but you must know what is the problem.

The problem is, that the outer SVG element is resized based on its CSS properties, but the inner IMAGE is rendered based on the HTML properties width and height .

To make it render correctly, you simply need to change HTML size attributes every time the actual size of the element changes:

    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 (outer DIV is optional):

<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>