我正在尝试了解如何应用一个从网页顶部附近开始并延伸到底部的渐变SVG模式。
我无法将渐变应用于整个图案，只能应用于组成图案的各个瓷砖。我已经尝试将渐变应用于瓷砖、图案、元素和CSS背景图像。
此外，当图案平铺时，圆角应仅出现在顶部平铺上，因为平铺重叠。由于某种原因，透明度从重叠的瓷砖一直穿透到背景，即使下面的瓷砖有填充颜色。
a。有没有任何方法可以将渐变应用于整个模式，也许可以将其包装在另一个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>a。有没有任何方法可以将渐变应用于整个模式，也许可以将其包装在另一个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个像素重叠。
这通常是由于抗锯齿。可以通过确保瓷砖与屏幕像素边界匹配来避免这种情况。如果你这样做，那么你就不需要重叠你的瓷砖。