具有漸變和平滑平鋪過渡的SVG圖案-有解無憂

我試圖了解如何應用具有從網頁頂部附近開始并延伸到底部的漸變的 SVG 模式。

我無法將漸變應用于整個圖案，只能應用于構成圖案的各個瓷磚。我嘗試將漸變應用于瓷磚、圖案、元素和 CSS 背景影像。

此外，當圖案平鋪時，圓角應該只出現在頂部的瓷磚上，因為瓷磚重疊。由于某種原因，透明度從重疊的圖塊一直穿透到背景，即使下面的圖塊具有填充顏色。

一種。有沒有辦法對整個圖案應用漸變，也許是通過將它包裝在另一個 SVG 中？

灣。我如何擺脫重疊瓷磚之間的圓角顯示，除了頂部瓷磚，它不與另一個瓷磚重疊？可以更改圖塊的 z-index 或圖塊堆疊順序嗎？

我還嘗試在 Illustrator 中創建一列很長的圖塊，它解決了在重疊圖塊之間顯示圓角的問題，并允許對整個圖案應用漸變。長 SVG 解決方案還有其他幾個問題：

C。顯然，如果我在網頁上使用 CSS 視差，則無法隱藏溢位和保留 3D，因此必須顯示整個列。

d。漸變應用于整個列，而不僅僅是頁面上呈現的圖案，因此大部分漸變大部分時間都看不見。

e. 一些圖塊具有將它們分開的單像素透明線，即使它們都在 Illustrator 中被捕捉。顯然，在 Illustrator 中創建 SVG 平鋪圖案需要手動輸入坐標，以便每個平鋪至少有 1 個像素重疊。

歡迎任何有關如何創建從頁面頂部附近一直延伸到底部且在瓷磚之間沒有透明偽影的漸變圖案的建議。這是 SVG 模式測驗的影像和 codepen。

謝謝你的幫助！

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>

uj5u.com熱心網友回復：

一種。有沒有辦法對整個圖案應用漸變，也許是通過將它包裝在另一個 SVG 中？

圖案拼貼的每個副本都是相同的。如果您需要一個漸變來覆寫整個檔案，那么它需要是一個單獨的元素。

灣。我如何擺脫重疊瓷磚之間的圓角顯示，除了頂部瓷磚，它不與另一個瓷磚重疊？可以更改圖塊的 z-index 或圖塊堆疊順序嗎？

圖案中的瓷磚永遠不會相互重疊。您的圖案拼貼指定為 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 個像素重疊。

這通常是由于抗鋸齒。通過確保您的圖塊與螢屏像素邊界匹配可以避免這種情況。如果你這樣做，那么你不應該需要重疊你的瓷磚。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432808.html

標籤：html css svg 图形

上一篇：我想通過img元素獲取檔案內容不是異步的，（src是svg）

下一篇：SVG餅圖文本標簽不顯示僅使用csshtml和svg（沒有圖表js或其他）