html - 水平重复 SVG 图案

Question

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

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

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

Answer 1

至少可以说，它很尴尬，而且远非完美。作为最外层的元素，我设置了一个 html <div>元素，但它也可以是 <svg>元素。关键是要记住你需要一个内部 <svg>与 overflow: visible , 和一个带有 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 .