如何使 SVG“填充”以类似于 CSS“background-position:right top”的方式运行

Question

我有以下 SVG 图像：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108"> <pattern id="i" width="100%" height="100%"> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMinYMin slice"/> </pattern> <rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/> </svg>

我需要用等效于以下 CSS 语法的图像填充矩形：

background-size:cover;
background-image:url("image.jpg");
background-repeat:no-repeat;
background-position:right top;

感谢这篇文章，我得到了除了 background-position:right top 之外的所有内容。 这在 SVG 图像中可能吗？ 如果是这样，我怎样才能做到这一点？

Answer 1

要模仿该行为，使图片的右上角位于rect的右上角，您只需将image的 preserveAspectRatio="xMinYMin slice preserveAspectRatio="xMinYMin slice"更改为preserveAspectRatio="xMaxYMin slice" ：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108"> <pattern id="i" width="100%" height="100%"> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMaxYMin slice"/> </pattern> <rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/> </svg>