0

I am trying to scale an SVG to be the full width of it's parent (the body) and for some reason it won't budge on chrome/safari - but works on Firefox

    <svg class="svg-graphic" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
      <defs>
        <pattern id='image' width="100%" height="140%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <image xlink:href='http://25.media.tumblr.com/28c4327f8d41f73e2ed6ccdf7da27efb/tumblr_mw4knrtHlH1qz7p1oo1_500.jpg' width="100" height="100" preserveAspectRatio="none"></image>
       </pattern>
      </defs>
      <polygon points="0, 0, 0, 5, 25, 40, 50, 5, 75, 40, 100, 5, 100, 0,)" fill="url(#image)" />
    </svg>

CSS

html, body { 
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin:0; 
        padding:0; 
    }

    .svg-graphic {
        position: fixed;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;            
        z-index: 10;
    }

Following this post here

Community
  • 1
  • 1
Joe Isaacson
  • 4,012
  • 6
  • 30
  • 40

1 Answers1

0

Have you considered using the SVG as a background image and setting the background-size property to cover?

    background-image: url(yoursvg.svg);
    background-repeat: no-repeat;
    background-size: cover;
lundybuilds.it
  • 1