How to set svg size to 100% using xlink:href=""?

Question

css

I found that using xlink:href="" svg is inserted in its original size, while using img and object/embed the image completely fills the container. What can I do to make scaling work through use xlink? Variations with 100% dimensions did not help (only works with the specified block height).
Also, if you insert through the svg tag without using xlink:href - the image is scaled normally.

Answer 1

Of course, my last example was 100% a hat, I thought and finalized ... to perfection, see

<svg id="my" width="500" height="300" viewbox=" 0 0 500 300" preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg">
       <defs>
        <pattern id="pattern" width="200" height="200"
           patternUnits="userSpaceOnUse">
    <image id="fon1" xlink:href="http://colourlovers.com.s3.amazonaws.com/images/patterns/2974/2974892.png" x="0" y="0" />
  </pattern>
        </defs>
     <polygon id="myFill" points="0,0 0,300 500,300 500,0" />
  </svg>

*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
}
#my{
  display:block;
  width:100%;
  height:100%;
}
#myFill{
  fill:url(#pattern);
}

sandbox link: https://codepen.io/simkaUser/pen/XeNWBK?editors=1100