如何在SVG中缩放重复图案？

Question

这里是重复的SVG模式：

div {
  background-color: #ddd;
  height: 140px;
}

<div>
  <svg width="100%" height="72">
    <pattern id="dots" x="0" y="0" width="42" height="100" patternUnits="userSpaceOnUse">
      <circle cx="9.5" cy="9.5" r="9.5" fill="#000"></circle>
      <circle cx="30.5" cy="36" r="9.5" fill="#000"></circle>
      <circle cx="9.5" cy="62.5" r="9.5" fill="#000"></circle>
    </pattern>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
  </svg>
</div>

我想按比例缩小图案，使它的高度仅变为24px（并且仍然重复容器的整个宽度）。

我该如何实现而不修改circle s属性？

Answer 1

您可以仅使用CSS轻松完成此操作：