SVG中的可滚动图像

Question

我正在尝试在SVG中复制此HTML：

<div>
   <img src="tallimg.jpg">
</div>

div {
  overflow: hidden;
  width: 10%;
  height: 50%;
}
img {
  width: 100%;
  height: auto;
}

到目前为止，我有这样的事情：

<svg>
  <defs>
    <clipPath id="clip-path">
      <rect x="0" y="0" width="600" height="400"></rect>
    </clipPath>
  </defs>

  <image x="0" y="0" width="100%" height="auto" xlink:href="tallimg.jpg" clip-path="url(#clip-path)">
</svg>

此几乎有效，但图片大小错误，因为SVG不支持height="auto"。相反，它会将auto解释为0。如果我改为使用height="100%" width="100%"，则会缩放它以适合其容器。

是否可以使用纯SVG执行此操作？我会更好地在SVG的顶部分层HTML等价物吗？