Question

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

system2("chmod", list("a+r", "/srv/shiny-server/app-dir/file.csv")

即。保留纵横比的背景图像与其容器具有相同的高度，居中并水平重复。 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，但宽度必须设置为正确的比率。
- 如果内部<svg>上的viewBox的值为"x 0 ws 1"，而wp是模式宽度，那么x = -(wp/2 + ws) - 就我的例子而言ws=0.1, wp=1.25 => x=-0.675 1}}。

水平重复SVG模式

1 个答案: