如何将栅栏 svg 复制为渐变

Question

svg 围栏 x

width: 10px;
height: 10px;

为此，这里需要创建由 16 个小 1px 正方形和一个更大的 2px在中间。

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" ><path stroke="rgb(113, 121, 126)" d="m10 .15-4.85 4.85 4.85 4.85v.15h-.13l-4.86-4.86-4.86 4.86h-.15v-.14l4.87-4.86-4.87-4.87v-.13h.15l4.86 4.86 4.85-4.86h.14z"/></svg>

放大后是这个样子

渐变将由较暗的阴影方形点组成。

这是 svg 栅栏图案：我想使用渐变复制 svg。

body {
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path stroke="rgb(113, 121, 126)" d="m10 .15-4.85 4.85 4.85 4.85v.15h-.13l-4.86-4.86-4.86 4.86h-.15v-.14l4.87-4.86-4.87-4.87v-.13h.15l4.86 4.86 4.85-4.86h.14z"/></svg>');
}

Answer 1

我能够做到这一点：https://jsfiddle.net/cruboqyt/

.test {
  width: 500px;
  height: 100px;
  background-image: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
}

Gradient是1st代码，svg是2nd代码。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;

  background-size: 165px 165px;
  background-image:
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),

    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),

    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),

    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),

    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),

    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),

    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),

    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),

    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),

    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),

    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),

    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),

    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),

    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),

    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),

    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),

    linear-gradient(var(--color-a), var(--color-a));
}

.test1 {
  width: 500px;
  height: 100px;
  background-image: linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    ),
    linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    );
  background-size: 10px 10px;
}

.test2 {
  width: 500px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path stroke="rgb(113, 121, 126)" d="m10 .15-4.85 4.85 4.85 4.85v.15h-.13l-4.86-4.86-4.86 4.86h-.15v-.14l4.87-4.86-4.87-4.87v-.13h.15l4.86 4.86 4.85-4.86h.14z"/></svg>');
}

<div class="test1"></div>
<hr>
<div class="test2"></div>

如何将栅栏 svg 复制为渐变

How to replicate fence svg as a gradient

css

gradient