用渐变填充 SVG

Question

我是一名学习前端的平面设计师。我有一项任务是重新设计以前使用 PNG 文件的图标系统。我想创建一个基本 SVG 小部件库，并使用 CSS 类自动处理精细细节。我设法 google 通过阴影和描边，但我找不到任何用渐变填充小部件的解决方案。我尝试复制一些适用于背景的解决方案：，但它们不起作用。我怎么做？我希望这个头骨是浅灰色的，里面有一些，边界上有黑色阴影渐变，让它看起来有点鼓鼓的。 Old PNG stars in a style I need to recreate in 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>

Answer 1

你可以用这个，解释在这里：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>

用渐变填充 SVG

Filling SVG with gradient

css

icons

svg

gradient

widget