如何创建重复的 SVG 图案？

Question

我得到了一个在网站背景中使用这种图案的设计

我认为 SVG 模式对于这样的事情来说是理想的选择。我可以制作这些形状的单独列，但我不确定是否可以通过不同的方式更好地生成它。我正在做的事情感觉是错误且低效的，并且它不会缩放以在屏幕上拉伸背景图像。

svg {
  border: 1px solid #CCC;
}

svg * { 
  transform-box: fill-box;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="780" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="hex" fill="#D4C1DE" fill-opacity="0.3" d="M0 25.980762113533157L15 0L45 0L60 25.980762113533157L45 51.96152422706631L15 51.96152422706631Z">
  </defs>
  
    <use xlink:href="#hex" transform-origin="center" x="0" y="0"   transform="scale(0.20)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="400" transform="scale(0.30)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="450" transform="scale(0.40)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="500" transform="scale(0.50)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="550" transform="scale(0.60)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="600" transform="scale(0.70)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="650" transform="scale(0.80)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="700" transform="scale(0.90)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="730" />
</svg>

这里有什么比较实用的方法可以达到想要的效果？

Answer 1

您可以使用

<pattern>

元素来重复元素。

这里的图案由一列

<use>

元素组成（就像你所做的那样）。该列由另外两个

<use>

元素重复。每列都有一个变换/平移，以便在图案中中间有一列六边形，左边有半列，右边有半列。重复该图案，两半将对齐并形成一个六边形孔。

我重构了六边形，使数字看起来更好并且六边形的中心是 0,0。那么就不需要处理六边形的原点了。

svg {
  border: 1px solid #CCC;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <path id="hex" fill="#D4C1DE" fill-opacity="0.3" d="M-10-17.32 10-17.32 20 0 10 17.32-10 17.32-20 0Z" />
    <pattern id="p1" viewBox="0 0 50 500" width="10%" height="100%">
      <g id="g1" transform="translate(0 20)">
        <use href="#hex" transform="translate(0   0) scale(.2)" />
        <use href="#hex" transform="translate(0  50) scale(.3)" />
        <use href="#hex" transform="translate(0 100) scale(.4)" />
        <use href="#hex" transform="translate(0 150) scale(.5)" />
        <use href="#hex" transform="translate(0 200) scale(.6)" />
        <use href="#hex" transform="translate(0 250) scale(.7)" />
        <use href="#hex" transform="translate(0 305) scale(.8)" />
        <use href="#hex" transform="translate(0 360) scale(.9)" />
        <use href="#hex" transform="translate(0 420) scale(1)" />
      </g>
      <use href="#g1" transform="translate(25 30)"/>
      <use href="#g1" transform="translate(50 0)"/>
    </pattern>
  </defs>
  <rect width="500" height="500" fill="url(#p1)" />
</svg>