logo标签列表

水平重复的SVG图案

htmlcsssvg
5

有可能在SVG填充中模拟以下CSS吗？

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

即一个背景图像可以保持其宽高比，具有与其容器相同的高度，居中，并且在水平方向上重复。 这个 JSBin 展示了我试图实现的行为，使用动画来展示背景对高度变化的响应。

1个回答
5

这个方法并不完美，有些尴尬。作为最外层元素，我已经设置了一个 <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"。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接