使用SVG <img/>作为覆盖内部比例减去SVG

Question

DEMO

目标：我正在尝试在HTML中创建一个三角形比例较少的图像。

我的方法：我决定使用SVG来创建一个可以伸展的多边形三角形。收缩以适合任何尺寸，并将其用作图像上的遮罩，假设适合任何尺寸而不会失去自己的比例。

问题虽然形状是按照我想要的方式工作，但背景图片会随着形状延伸，有什么方法可以让图像表现得像css background-size: cover属性一样

代码：

HTML

<div id="svg-container">
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <defs>
          <polygon id="mask" points="0,0 0,100 0,100 100,0" />
          <pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100" x="0" y="0">
              <image xlink:href="http://lorempixel.com/500/500" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin slice"/>
          </pattern>
      </defs>
      <use xlink:href="#mask" fill="url(#image)"></use>
    </svg>
</div>

CSS：

#svg-container {
    width: 100%;
    height: 100px;
}

使用SVG image代码here检查同一问题。