用漸變填充SVG

我是一名平面設計師，學習前端。我有一項任務要重新設計以前使用 PNG 檔案的圖示系統。我想創建一個基本 SVG 小部件庫，并使用 CSS 類自動化細節。我設法通過陰影和筆觸用谷歌搜索，但我找不到任何用漸變填充小部件的解決方案。我嘗試復制一些適用于背景的解決方案：，但它們不起作用。我怎么做？我希望這個頭骨是淺灰色的，里面有一些，邊緣有黑色陰影漸變，看起來有點凸出。舊 PNG 以我需要在 CSS 中重新創建的樣式加星。

.widgetColor {
  position: absolute;
  margin-top: 5px;
  margin-left: 5px;
  max-width: 24px;
  overflow: auto;
  /* fill: black; */
  fill: radial-gradient(black, #fff);
  filter: drop-shadow(0px 0px 4px #fff);
  stroke: blueviolet;
}

<svg class="widgetColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.9 40.24"><path d="M36.81,15.63a16.59,16.59,0,0,0-.74-3.4,17.45,17.45,0,0,0-1.39-3.12A18.64,18.64,0,0,0,18.45,0,18.62,18.62,0,0,0,2.23,9.11a16.81,16.81,0,0,0-1.4,3.12,15.94,15.94,0,0,0-.73,3.4A14.76,14.76,0,0,0,0,17.4a15.5,15.5,0,0,0,.1,1.69c0,.25.06.49.1.73s.09.57.15.86.13.62.21.93.1.35.16.52c.11.36.22.72.35,1.08.18,1.39.38,2.68.38,3.41A4,4,0,0,0,5.5,30.67L7,31.4H7a5.37,5.37,0,0,1,.53,1,3.52,3.52,0,0,1,.15.42c0,.13.07.25.1.38a4.93,4.93,0,0,1,.11.94v1a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5v-1a4.93,4.93,0,0,1,.11-.94c0-.13.06-.25.1-.38s.1-.28.15-.42a5.41,5.41,0,0,1,.54-1h0l1.51-.73a4.05,4.05,0,0,0,4.06-4.05c0-.73.19-2,.37-3.41.14-.36.25-.72.36-1.08l.15-.52c.08-.31.15-.62.22-.93s.1-.57.14-.86.08-.48.11-.73c0-.55.09-1.11.09-1.69A17.19,17.19,0,0,0,36.81,15.63ZM11.22,28.3a5,5,0,0,1-5-5c0-2.79.17-4,3-4s7.13,1.24,7.13,4A5,5,0,0,1,11.22,28.3Zm7.23,1.24c-1,0-1.76,1.85-1.76.88a3.29,3.29,0,0,1,1-2.22c.23-.19.48.53.75.53s.52-.72.75-.53a3.3,3.3,0,0,1,1,2.22C20.22,31.39,19.43,29.54,18.45,29.54ZM26.9,28.3a5,5,0,0,1-5-5c0-2.79,4.35-4,7.13-4s3,1.24,3,4A5,5,0,0,1,26.9,28.3Z"/></svg>

uj5u.com熱心網友回復：

你可以用這個，解釋在這里：https : //www.w3schools.com/graphics/svg_grad_linear.asp

.widgetColor {
  position: absolute;
  margin-top: 5px;
  margin-left: 5px;
  max-width: 24px;
  overflow: auto;
  filter: drop-shadow(0px 0px 4px #fff);
  stroke: blueviolet;
}

<svg class="widgetColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.9 40.24">
  <path d="M36.81,15.63a16.59,16.59,0,0,0-.74-3.4,17.45,17.45,0,0,0-1.39-3.12A18.64,18.64,0,0,0,18.45,0,18.62,18.62,0,0,0,2.23,9.11a16.81,16.81,0,0,0-1.4,3.12,15.94,15.94,0,0,0-.73,3.4A14.76,14.76,0,0,0,0,17.4a15.5,15.5,0,0,0,.1,1.69c0,.25.06.49.1.73s.09.57.15.86.13.62.21.93.1.35.16.52c.11.36.22.72.35,1.08.18,1.39.38,2.68.38,3.41A4,4,0,0,0,5.5,30.67L7,31.4H7a5.37,5.37,0,0,1,.53,1,3.52,3.52,0,0,1,.15.42c0,.13.07.25.1.38a4.93,4.93,0,0,1,.11.94v1a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5v-1a4.93,4.93,0,0,1,.11-.94c0-.13.06-.25.1-.38s.1-.28.15-.42a5.41,5.41,0,0,1,.54-1h0l1.51-.73a4.05,4.05,0,0,0,4.06-4.05c0-.73.19-2,.37-3.41.14-.36.25-.72.36-1.08l.15-.52c.08-.31.15-.62.22-.93s.1-.57.14-.86.08-.48.11-.73c0-.55.09-1.11.09-1.69A17.19,17.19,0,0,0,36.81,15.63ZM11.22,28.3a5,5,0,0,1-5-5c0-2.79.17-4,3-4s7.13,1.24,7.13,4A5,5,0,0,1,11.22,28.3Zm7.23,1.24c-1,0-1.76,1.85-1.76.88a3.29,3.29,0,0,1,1-2.22c.23-.19.48.53.75.53s.52-.72.75-.53a3.3,3.3,0,0,1,1,2.22C20.22,31.39,19.43,29.54,18.45,29.54ZM26.9,28.3a5,5,0,0,1-5-5c0-2.79,4.35-4,7.13-4s3,1.24,3,4A5,5,0,0,1,26.9,28.3Z"/>
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#000" />
      <stop offset="95%" stop-color="#FFF" />
    </linearGradient>
  </defs>
  <style type="text/css">
    svg{fill:url(#MyGradient)}
  </style>
</svg>

標籤：css svg 小部件 图标 坡度

上一篇：在圖片下方放置鏈接

下一篇：減OR運算子