具有渐变和平滑平铺过渡的 SVG 模式
SVG Pattern with Gradient and Smooth Tile Transitions
我正在尝试了解如何应用具有渐变的 SVG 图案，该渐变从网页顶部附近开始并延伸到底部。
我无法将渐变应用于整个图案，只能应用于构成图案的各个图块。我已经尝试将渐变应用于图块、图案、元素和 CSS 背景图像。
此外，当拼贴图案时，圆角应该只出现在顶部拼贴上，因为拼贴重叠。由于某种原因，透明度从重叠的拼贴一直穿透到背景，即使下面的拼贴具有填充颜色。
一个。有什么方法可以将渐变应用于整个图案，也许是通过将其包装在另一个 SVG 中？
b。我如何摆脱重叠图块之间的圆角显示，除了顶部图块，它不与另一个图块重叠？是否可以更改图块的 z-index 或图块堆叠顺序？
我还尝试在 illustrator 中创建一列很长的图块，这解决了在重叠图块之间显示圆角的问题，并允许对整个图案应用渐变。较长的 SVG 解决方案还有其他几个问题：
c。显然，如果我在网页上使用 CSS 视差，则无法隐藏溢出和保留 3D，因此必须显示整个列。
d。渐变应用于整个列，而不仅仅是页面上呈现的图案，因此大部分渐变大部分时间都在视图之外。
e。尽管它们都是在 Illustrator 中捕捉到的，但其中一些图块具有将它们分隔开的单像素透明线。显然，在 Illustrator 中创建 SVG 拼贴图案需要手动输入坐标，以便每个拼贴至少有 1 个像素重叠。
欢迎就如何创建从页面顶部附近一直延伸到底部的渐变图案提出任何建议，并且磁贴之间没有透明伪影。
这是 SVG 模式测试的图像和代码笔。
感谢您的帮助！
https://codepen.io/ripmurdock/pen/JjOLXqL?editors=1000
SVG pattern with gradient
* {
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. Is there any way to apply a gradient to the entire pattern, perhaps by wrapping it in another SVG?
图案拼贴的每个副本都是相同的。如果您需要渐变来覆盖整个文档，那么它需要是一个单独的元素。
b. How do I get rid of the display of rounded corners between the overlapping tiles, except for the top tile, which does not overlap another tile? Can the z-index of the tiles or the tile stacking order be changed?
图案中的瓷砖永远不会相互重叠。您的图案拼贴指定为 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. Apparently if I’m using CSS parallax on a webpage, it’s impossible to hide the overflow and preserve3D, so the entire column has to be displayed.
d. The gradient is applied to the entire column, not just the pattern as rendered on the page, so most of the gradient is out of view most of the time.
我不确定你说这些是什么意思。您可能需要针对这些问题提出一个单独的问题。
e. Several of the tiles have single pixel lines of transparency separating them, even though they were all snapped in Illustrator. Apparently creating an SVG tile pattern in Illustrator will require manually entering the coordinates so that at least 1 pixel overlaps for each tile.
这通常是由于抗锯齿造成的。可以通过确保您的图块与屏幕像素边界匹配来避免这种情况。如果你这样做，那么你就不需要重叠你的瓷砖。
我正在尝试了解如何应用具有渐变的 SVG 图案，该渐变从网页顶部附近开始并延伸到底部。
我无法将渐变应用于整个图案，只能应用于构成图案的各个图块。我已经尝试将渐变应用于图块、图案、元素和 CSS 背景图像。
此外，当拼贴图案时，圆角应该只出现在顶部拼贴上，因为拼贴重叠。由于某种原因，透明度从重叠的拼贴一直穿透到背景，即使下面的拼贴具有填充颜色。
一个。有什么方法可以将渐变应用于整个图案，也许是通过将其包装在另一个 SVG 中？
b。我如何摆脱重叠图块之间的圆角显示，除了顶部图块，它不与另一个图块重叠？是否可以更改图块的 z-index 或图块堆叠顺序？
我还尝试在 illustrator 中创建一列很长的图块，这解决了在重叠图块之间显示圆角的问题，并允许对整个图案应用渐变。较长的 SVG 解决方案还有其他几个问题：
c。显然，如果我在网页上使用 CSS 视差，则无法隐藏溢出和保留 3D，因此必须显示整个列。
d。渐变应用于整个列，而不仅仅是页面上呈现的图案，因此大部分渐变大部分时间都在视图之外。
e。尽管它们都是在 Illustrator 中捕捉到的，但其中一些图块具有将它们分隔开的单像素透明线。显然，在 Illustrator 中创建 SVG 拼贴图案需要手动输入坐标，以便每个拼贴至少有 1 个像素重叠。
欢迎就如何创建从页面顶部附近一直延伸到底部的渐变图案提出任何建议，并且磁贴之间没有透明伪影。 这是 SVG 模式测试的图像和代码笔。
感谢您的帮助！
https://codepen.io/ripmurdock/pen/JjOLXqL?editors=1000
SVG pattern with gradient
* {
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. Is there any way to apply a gradient to the entire pattern, perhaps by wrapping it in another SVG?
图案拼贴的每个副本都是相同的。如果您需要渐变来覆盖整个文档，那么它需要是一个单独的元素。
b. How do I get rid of the display of rounded corners between the overlapping tiles, except for the top tile, which does not overlap another tile? Can the z-index of the tiles or the tile stacking order be changed?
图案中的瓷砖永远不会相互重叠。您的图案拼贴指定为 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. Apparently if I’m using CSS parallax on a webpage, it’s impossible to hide the overflow and preserve3D, so the entire column has to be displayed.
d. The gradient is applied to the entire column, not just the pattern as rendered on the page, so most of the gradient is out of view most of the time.
我不确定你说这些是什么意思。您可能需要针对这些问题提出一个单独的问题。
e. Several of the tiles have single pixel lines of transparency separating them, even though they were all snapped in Illustrator. Apparently creating an SVG tile pattern in Illustrator will require manually entering the coordinates so that at least 1 pixel overlaps for each tile.
这通常是由于抗锯齿造成的。可以通过确保您的图块与屏幕像素边界匹配来避免这种情况。如果你这样做，那么你就不需要重叠你的瓷砖。