水平重复 SVG 模式

Question

是否可以在 SVG 填充中模拟以下 CSS？

background-image: url(/* URL */);
background-position: 50%;
background-size: auto 100%;
background-repeat: repeat-x;

即保留其纵横比、与其容器具有相同高度、居中且水平重复的背景图像。这个JSBin 演示了我试图实现的行为，使用动画来显示背景如何响应高度变化。

Answer 1

至少可以说这很尴尬，而且远非完美。作为最外层的元素，我设置了一个html<div>元素，但它也可以是一个<svg>元素。关键是要记住，您需要一个内部<svg>withoverflow: visible和一个外部元素 with overflow: hidden（这将是<svg>元素的默认值 。

@keyframes shrink {
  0% { height: 200px; }
  100% { height: 50px; }
}

div {
  animation: 2s ease-in-out 0s infinite alternate shrink;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

<div>
  <svg width="100%" height="100%" viewBox="-0.675 0 0.1 1"
       preserveAspectRatio="xMidYMid meet" overflow="visible">
    <pattern id="p1" viewBox="0 0 100 80" height="1" width="1.25"
             patternUnits="userSpaceOnUse">
      <image xlink:href="http://static.jsbin.com/images/dave.min.svg"
             width="100" height="80" />
      <rect width="100" height="80" fill="none" stroke="brown" />
    </pattern>
    <rect fill="url(#p1)" x="-500" y="0" width="1000" height="1" />
  </svg>
</div>

• 重复在概念上并不是无止境的，而只是很长——我设置了 1000 / 1。
• 如果容器在 svg viewBox 的纵横比方面高于宽度，则图像只会缩放到 viewBox 仍然适合内部的程度。这是因为meet关键字始终应用于两个方向。因此，viewBox 的宽度需要很小 - 我已经设置了 1 / 10。
• 图片的大小需要提前知道，必须用到四个地方：
  • 在<image>宽度和高度必须明确地设置，SVG没有“天然大小”的概念。
  • 该<pattern>viewBox属性必须设置为图像大小。我添加了一个矩形来说明图像边框。
  • 虽然图案高度属性始终需要为 1，但宽度必须设置为正确的纵横比。
  • 如果内部的 viewBox<svg>的值为"x 0 ws 1", 并且wp是图案宽度，则x = -(wp/2 + ws)- 对于我的示例，ws=0.1, wp=1.25 => x=-0.675.