具有渐变和平滑平滑平铺过渡的 SVG 图案

SVG Pattern with Gradient and Smooth Tile Transitions

提问人：Rip 提问时间：2/20/2022 最后编辑：Paul LeBeauRip 更新时间：2/20/2022 访问量：221

问：

我正在尝试了解如何应用具有渐变的 SVG 模式，该渐变从网页顶部附近开始并延伸到底部。

我无法将渐变应用于整个图案，只能应用于构成图案的各个瓷砖。我尝试将渐变应用于瓷砖、图案、元素和 CSS 背景图像。

此外，当图案平铺时，圆角应仅出现在顶部平铺上，因为平铺重叠。出于某种原因，透明度从重叠的瓷砖一直穿透到背景，即使下面的瓷砖具有填充颜色。

一个。有没有办法将渐变应用于整个模式，也许是将其包装在另一个 SVG 中？

b.如何摆脱重叠磁贴之间的圆角显示，但顶部磁贴除外，它不会与另一个磁贴重叠？可以更改图块的 z 索引或图块堆叠顺序吗？

我还尝试在 illustrator 中创建一列很长的图块，这解决了在重叠图块之间显示圆角的问题，并允许对整个图案应用渐变。长 SVG 解决方案还存在其他几个问题：

c. 显然，如果我在网页上使用 CSS 视差，则不可能隐藏溢出并保留 3D，因此必须显示整个列。

d. 渐变应用于整个列，而不仅仅是页面上呈现的图案，因此大多数渐变在大多数时候都不在视野中。

e.其中几个图块的单像素透明线将它们分开，即使它们都是在 Illustrator 中捕捉到的。显然，在 Illustrator 中创建 SVG 图块图案需要手动输入坐标，以便每个图块至少有 1 个像素重叠。

欢迎任何关于如何创建渐变图案的建议，该图案的渐变从页面顶部附近一直延伸到底部，并且磁贴之间没有透明伪影。 这是 SVG 模式测试和码笔的图像。

感谢您的帮助！

https://codepen.io/ripmurdock/pen/JjOLXqL?editors=1000

带渐变的 SVG 图案

* {
  margin:0;
  padding:0;
}

body{
  background-color:tomato;
}

.gradient-1{
  color: white;
}
<svg width="100%" height="99.5vh">
 <defs>
   <pattern id="cc_vert_tiles-1" x="" y="" width="300" height="176" patternUnits="userSpaceOnUse" fill="url(#SVGID_1_)">
     <use href="#cp_3_ring_rnd4_uneq_1_" />
   </pattern>  
   
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100.0005" y1="200" x2="100.0005" y2="4.882813e-004">
    <stop  offset="0.0443" style="stop-color:#FFFF00"/>
    <stop  offset="0.1669" style="stop-color:#FFFD00"/>
    <stop  offset="0.2387" style="stop-color:#FFF400"/>
    <stop  offset="0.2975" style="stop-color:#FFE600"/>
    <stop  offset="0.3491" style="stop-color:#FFD200"/>
    <stop  offset="0.3961" style="stop-color:#FFB800"/>
    <stop  offset="0.4392" style="stop-color:#FF9900"/>
    <stop  offset="0.468" style="stop-color:#FF7F00"/>
    <stop  offset="0.5948" style="stop-color:#BC7F00"/>
    <stop  offset="0.7949" style="stop-color:#587F00"/>
    <stop  offset="0.9343" style="stop-color:#197F00"/>
    <stop  offset="1" style="stop-color:#007F00"/>
</linearGradient>
   <path id="cp_3_ring_rnd4_uneq_1_" height="200" width="200" d="M200,190c0,5.522-4.478,10-10,10H10c-5.523,0-10-4.478-10-10V10C0,4.477,4.477,0,10,0h180
    c5.522,0,10,4.477,10,10V190z M5,99.621c0,52.467,42.533,95,95,95c52.467,0,95-42.533,95-95c0-52.467-42.533-95-95-95
    C47.533,4.621,5,47.154,5,99.621z"/>
 </defs>
 <g class="gradient-1">
 <rect id="cc_vert_pat-1" width="200" height="110vh" fill="url(#cc_vert_tiles-1)" />
   </g>
</svg>

html css svg 图形

评论

答：

0赞 Paul LeBeau 2/20/2022 #1

一个。有没有办法将渐变应用于整个模式，也许是将其包装在另一个 SVG 中？

图案图块的每个副本都是相同的。如果您需要一个渐变来覆盖整个文档，那么它需要是一个单独的元素。

b.如何摆脱重叠磁贴之间的圆角显示，但顶部磁贴除外，它不会与另一个磁贴重叠？可以更改图块的 z 索引或图块堆叠顺序吗？

图案中的图块永远不会相互重叠。图案磁贴指定为 300x176。该区域之外的任何内容都不会呈现。但是，在磁贴中使用的路径为 200x200。因此，路径底部的 24 个单位被剪掉了 （200-176）。这就是底部圆角不显示的原因。

如果希望整个路径可见，则它的大小不得大于 300x176。

如果你需要你的瓷砖实际重叠，那么图案对你没有用。您需要自己绘制所有图块。根据您提到的 Illustrator 实验。

在以下示例中，我更改了图案尺寸以匹配路径覆盖的区域 （200x200）。

* {
  margin:0;
  padding:0;
}

body{
  background-color:tomato;
}

.gradient-1{
  color: white;
}
<svg width="100%" height="99.5vh">
 <defs>
   <pattern id="cc_vert_tiles-1" x="" y="" width="200" height="200" patternUnits="userSpaceOnUse" fill="url(#SVGID_1_)">
     <use href="#cp_3_ring_rnd4_uneq_1_" />
   </pattern>  
   
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100.0005" y1="200" x2="100.0005" y2="4.882813e-004">
    <stop  offset="0.0443" style="stop-color:#FFFF00"/>
    <stop  offset="0.1669" style="stop-color:#FFFD00"/>
    <stop  offset="0.2387" style="stop-color:#FFF400"/>
    <stop  offset="0.2975" style="stop-color:#FFE600"/>
    <stop  offset="0.3491" style="stop-color:#FFD200"/>
    <stop  offset="0.3961" style="stop-color:#FFB800"/>
    <stop  offset="0.4392" style="stop-color:#FF9900"/>
    <stop  offset="0.468" style="stop-color:#FF7F00"/>
    <stop  offset="0.5948" style="stop-color:#BC7F00"/>
    <stop  offset="0.7949" style="stop-color:#587F00"/>
    <stop  offset="0.9343" style="stop-color:#197F00"/>
    <stop  offset="1" style="stop-color:#007F00"/>
</linearGradient>
   <path id="cp_3_ring_rnd4_uneq_1_" d="M200,190c0,5.522-4.478,10-10,10H10c-5.523,0-10-4.478-10-10V10C0,4.477,4.477,0,10,0h180
    c5.522,0,10,4.477,10,10V190z M5,99.621c0,52.467,42.533,95,95,95c52.467,0,95-42.533,95-95c0-52.467-42.533-95-95-95
    C47.533,4.621,5,47.154,5,99.621z"/>
 </defs>
 <g class="gradient-1">
 <rect id="cc_vert_pat-1" width="200" height="110vh" fill="url(#cc_vert_tiles-1)" />
   </g>
</svg>

可以有一个覆盖图案中所有瓷砖的渐变。您可以做的是将渐变应用于矩形，然后将图案转换为蒙版。

* {
  margin:0;
  padding:0;
}

body{
  background-color:tomato;
}
<svg width="100%" height="99.5vh">
  <defs>
    <pattern id="cc_vert_tiles-1" x="" y="" width="200" height="200" patternUnits="userSpaceOnUse" fill="url(#SVGID_1_)">
      <use href="#cp_3_ring_rnd4_uneq_1_" fill="white" />
    </pattern>  
   
    <linearGradient id="SVGID_1_" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
      <stop  offset="0.0443" style="stop-color:#FFFF00"/>
      <stop  offset="0.1669" style="stop-color:#FFFD00"/>
      <stop  offset="0.2387" style="stop-color:#FFF400"/>
      <stop  offset="0.2975" style="stop-color:#FFE600"/>
      <stop  offset="0.3491" style="stop-color:#FFD200"/>
      <stop  offset="0.3961" style="stop-color:#FFB800"/>
      <stop  offset="0.4392" style="stop-color:#FF9900"/>
      <stop  offset="0.468" style="stop-color:#FF7F00"/>
      <stop  offset="0.5948" style="stop-color:#BC7F00"/>
      <stop  offset="0.7949" style="stop-color:#587F00"/>
      <stop  offset="0.9343" style="stop-color:#197F00"/>
      <stop  offset="1" style="stop-color:#007F00"/>
    </linearGradient>
    
    <path id="cp_3_ring_rnd4_uneq_1_" d="M200,190c0,5.522-4.478,10-10,10H10c-5.523,0-10-4.478-10-10V10C0,4.477,4.477,0,10,0h180
      c5.522,0,10,4.477,10,10V190z M5,99.621c0,52.467,42.533,95,95,95c52.467,0,95-42.533,95-95c0-52.467-42.533-95-95-95
      C47.533,4.621,5,47.154,5,99.621z"/>
      
    <mask id="pat-mask">
      <rect id="cc_vert_pat-1" width="200" height="110vh" fill="url(#cc_vert_tiles-1)" />
    </mask>
  </defs>

  <g class="gradient-1">
    <rect id="cc_vert_pat-1" width="200" height="110vh" fill="url(#SVGID_1_)" mask="url(#pat-mask)"/>
  </g>
</svg>

c. 显然，如果我在网页上使用 CSS 视差，则不可能隐藏溢出并保留 3D，因此必须显示整个列。

d. 渐变应用于整个列，而不仅仅是页面上呈现的图案，因此大多数渐变在大多数时候都不在视野中。

我不确定你对这些是什么意思。对于这些，您可能需要单独提出一个问题。

e.其中几个图块的单像素透明线将它们分开，即使它们都是在 Illustrator 中捕捉到的。显然，在 Illustrator 中创建 SVG 图块图案需要手动输入坐标，以便每个图块至少有 1 个像素重叠。

这通常是由于抗锯齿造成的。可以通过确保磁贴与屏幕像素边界匹配来避免这种情况。如果这样做，则不需要重叠磁贴。

评论

0赞 Rip 2/22/2022
谢谢！将图案应用于蒙版并将渐变和蒙版应用于矩形解决了我的渐变问题。
0赞 Rip 2/22/2022
我还为端盖创建了一个矩形，我想要圆角，第二个矩形位于第一个矩形下方，剪裁圆角，允许在跨越页面其余部分的磁贴之间无缝过渡。再次感谢。

上一个：如何使用 Makefile 变量作为文件包含在 g++ 命令中？

下一个：将鼠标悬停在 div 更新上，按点显示或间歇性显示