主页 / coding / 问题 / 78991281
Accepted
Chris Barr
Asked: 2024-09-17 02:03:16 +0800 CST

如何创建重复的 SVG 图案？

  • 772

我被委托设计一个网站，在背景中使用这种图案

重复的六边形图案

我认为 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>

有什么更实用的方法可以实现此处预期的效果？

svg

2 个回答

  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>

    更新

    好的，这只是我的想法。图案应该覆盖 HTML 页面的背景。不用担心元素<pattern>。默认情况下，CSS 背景图像将重复。在下面的示例中，我使用此 SVG 图像：

    <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 500" width="50">
  <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" />
  </defs>
  <rect width="500" height="500" fill="url(#p1)" />
  <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)"/>
</svg>

    因此，与上面相同，只是没有图案。然后您可以将其插入为背景图像。它可以调整到高度（这里使用background-size: contain;），或者您可以忽略它，SVG 将使用定义的 50px 宽度重复。

    body {
  height: 100vh;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MDAiIHdpZHRoPSI1MCI+CiAgPGRlZnM+CiAgICA8cGF0aCBpZD0iaGV4IiBmaWxsPSIjRDRDMURFIiBmaWxsLW9wYWNpdHk9IjAuMyIgZD0iTS0xMC0xNy4zMiAxMC0xNy4zMiAyMCAwIDEwIDE3LjMyLTEwIDE3LjMyLTIwIDBaIiAvPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0idXJsKCNwMSkiIC8+CiAgPGcgaWQ9ImcxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDIwKSI+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgICAwKSBzY2FsZSguMikiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgIDUwKSBzY2FsZSguMykiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMTAwKSBzY2FsZSguNCkiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMTUwKSBzY2FsZSguNSkiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjAwKSBzY2FsZSguNikiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjUwKSBzY2FsZSguNykiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMzA1KSBzY2FsZSguOCkiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMzYwKSBzY2FsZSguOSkiIC8+CiAgICA8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNDIwKSBzY2FsZSgxKSIgLz4KICA8L2c+CiAgPHVzZSBocmVmPSIjZzEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1IDMwKSIvPgogIDx1c2UgaHJlZj0iI2cxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCAwKSIvPgo8L3N2Zz4=');
  background-size: contain;
  background-repeat: repeat-x;
}

    • 2
  2. Best Answer

    给克里斯一点小改变，他的回答很棒

    • 现代浏览器接受原始 SVG 作为 dataURI，无需 Base64

      • 只需替换换行符和“和#

    • Web <svg-background>组件允许编辑 SVG 并立即查看结果

    customElements.define( "svg-background", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // wait till <template> is parsed as DOM
        let svg = this.querySelector("template").innerHTML
                      .replace("#D4C1DE",this.getAttribute("fill") || "#D4C1DE")
                      .replaceAll("\n", "")    // replace linebreaks
                      .replaceAll('"', "'")    // replace double quotes
                      .replaceAll("#", "%23"); // escape #
        Object.assign(this.style, { // or document.body.style
          display: "block",
          width: "100vw",
          height: "100vh",
          backgroundImage: `url("data:image/svg+xml;utf8,${svg}")`,
          backgroundSize: "contain",
        });
      });
    }
  }
);
    <svg-background fill="green">
  <template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 500" fill="white">
      <defs>
        <path id="h" fill="#D4C1DE" fill-opacity="0.3" d="M-10-17.32 10-17.32 20 0 10 17.32-10 17.32-20 0Z" />
      </defs>
      <g id="g" transform="translate(0 20)">
        <use href="#h" transform="translate(0   0) scale(.2)" />
        <use href="#h" transform="translate(0  50) scale(.3)" />
        <use href="#h" transform="translate(0 100) scale(.4)" />
        <use href="#h" transform="translate(0 150) scale(.5)" />
        <use href="#h" transform="translate(0 200) scale(.6)" />
        <use href="#h" transform="translate(0 250) scale(.7)" />
        <use href="#h" transform="translate(0 305) scale(.8)" />
        <use href="#h" transform="translate(0 360) scale(.9)" />
        <use href="#h" transform="translate(0 420) scale(1)" />
      </g>
      <use href="#g" transform="translate(25 30)"/>
      <use href="#g" transform="translate(50 0)"/>
    </svg>
  </template>
</svg-background>

    • 1

相关问题