在圆形进度条的外接参考中使用阴影光

Question

我正在运行一个圆形进度条，在底部我需要显示一点阴影。我正在使用 SVG 元素，我尝试使用浅色和深色的线性渐变，但它没有按预期工作。

下面是示例图像，我也需要同样的图像。

我尝试了具有两种颜色的浅色和深色的线性渐变，其中深色必须设置为阴影，但它无法按照所附图像工作。下面是示例代码，我尝试重现相同的代码。

下面是我在那里使用的一段代码。

<svg class="progress-bar" width="300" height="300" data-degree="80" viewBox="0 0 100 110" fill="none">
  <defs>
    <linearGradient id="lg1" x1="0.7" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#eee" />
      <stop offset="100%" stop-color="#ddd" />
    </linearGradient>
    <mask id="m1">
      <circle transform="rotate(135)" stroke="white"
        stroke-width="12" r="44" stroke-dasharray="270 360"
        pathLength="360"/>
    </mask>
    <radialGradient id="rg1">
      <stop offset="0%" stop-color="#aaa" />
      <stop offset="40%" stop-color="#ccc" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
     <linearGradient id="b1" x1="0.20" y1="12" x2="0.5" y2="2">
            <stop startOffset="0%" stopColor="#E8EBEF" stopOpacity="3" />
            <stop offset="10%" stopColor="#FFFFFF" />
            <stop offset="100%" stopColor="#E8EBEF" />
          </linearGradient>
  </defs>
  <ellipse cx="50" cy="102" rx="40" ry="8" fill="url(#rg1)" />
  <g transform="translate(50 50)">
    <circle stroke="#eee" stroke-width="12" r="44"/>
    <g mask="url(#m1)">
      <rect transform="translate(-50 -50)" width="100" height="100"
        fill="url(#lg1)" />
      <circle stroke="url(#b1)" stroke-width="12" r="44"
        stroke-dasharray=".5 4.5" pathLength="360" pathLength="360"/>
      <circle stroke="#bbb" stroke-width="12" r="44"/>
    </g>
    <g transform="rotate(135)">
      <circle id="c1" stroke="#0b60e9" stroke-width="8" r="42"
        stroke-dasharray="100 133" pathLength="133.5"/>
    </g>
    <line transform="rotate(45) translate(38 0)" stroke="#aaa"
      stroke-width="1" x2="12" />
    <line transform="rotate(135) translate(38 0)" stroke="#aaa"
      stroke-width="1" x2="12" />
    <g id="g1" transform="rotate(216)">
      <line transform="rotate(-225) translate(38 0)" stroke="#000"
        stroke-width=".5" x2="12" />
      <polygon transform="rotate(-225) translate(36 0)"
        points="0,-4.5 0,4.5 5,0" fill="#000"/>
    </g>
    <text id="t1" font-family="sans-serif" font-size="20" font-weight="400"
      text-anchor="middle" dominant-baseline="middle" fill="#0b60e9">75</text>
    <text id="t2" y="10" font-family="sans-serif" font-size="9"
      font-weight="400" text-anchor="start" dominant-baseline="hanging" fill="#000">80</text>
  </g>
</svg>

这里还有小提琴链接：小提琴链接 FYR。

需要帮助。

Answer 1

你需要一个过滤器。要创建“内阴影”，您需要以下内容：

1. 偏移滤镜，以便仅内部阴影的上部可见。
2. 为阴影创建模糊 (feGaussianBlur)。
3. 剪掉源图形外部的模糊（第一个 feComposite）。
4. 创建黑色、半透明颜色（feFlood）
5. 用颜色（第二个 feComposite）为内部阴影着色。
6. 将内部阴影放置在源图形上（第三个 feComposite）。

<filter id="f1">
  <feOffset dx="0" dy="3" />
  <feGaussianBlur stdDeviation="1" result="blur" />
  <feComposite operator="out" in="SourceGraphic"
    in2="blur" result="inverse" />
  <feFlood flood-color="#000" flood-opacity=".3" result="blackcolor" />
  <feComposite operator="in" in="blackcolor"
    in2="inverse" result="shadow" />
  <feComposite operator="over" in="shadow"
    in2="SourceGraphic" />
</filter>

在这里，在你的进程栏中实现：

<svg class="progress-bar" width="300" height="300" data-degree="80" viewBox="0 0 100 110" fill="none">
  <defs>
    <linearGradient id="lg1" x1="0.7" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#eee" />
      <stop offset="100%" stop-color="#ddd" />
    </linearGradient>
    <mask id="m1">
      <circle transform="rotate(135)" stroke="white"
        stroke-width="12" r="44" stroke-dasharray="270 360"
        pathLength="360"/>
    </mask>
    <radialGradient id="rg1">
      <stop offset="0%" stop-color="#aaa" />
      <stop offset="40%" stop-color="#ccc" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
     <linearGradient id="b1" x1="0.20" y1="12" x2="0.5" y2="2">
            <stop startOffset="0%" stopColor="#E8EBEF" stopOpacity="3" />
            <stop offset="10%" stopColor="#FFFFFF" />
            <stop offset="100%" stopColor="#E8EBEF" />
          </linearGradient>
  
    <filter id="f1">
      <feOffset dx="0" dy="3" />
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite operator="out" in="SourceGraphic"
        in2="blur" result="inverse" />
      <feFlood flood-color="#000" flood-opacity=".3" result="blackcolor" />
      <feComposite operator="in" in="blackcolor"
        in2="inverse" result="shadow" />
      <feComposite operator="over" in="shadow"
        in2="SourceGraphic" />
    </filter>
  </defs>
  <ellipse cx="50" cy="102" rx="40" ry="8" fill="url(#rg1)" />
  <g transform="translate(50 50)">
    <circle stroke="#eee" stroke-width="12" r="44" filter="url(#f1)"/>
    <g mask="url(#m1)">
      <rect transform="translate(-50 -50)" width="100" height="100"
        fill="url(#lg1)" />
      <circle stroke="url(#b1)" stroke-width="12" r="44"
        stroke-dasharray=".5 4.5" pathLength="360" pathLength="360"/>
      <circle stroke="#bbb" stroke-width="12" r="44"/>
    </g>
    <g transform="rotate(135)">
      <circle id="c1" stroke="#0b60e9" stroke-width="8" r="42"
        stroke-dasharray="100 133" pathLength="133.5"/>
    </g>
    <line transform="rotate(45) translate(38 0)" stroke="#aaa"
      stroke-width="1" x2="12" />
    <line transform="rotate(135) translate(38 0)" stroke="#aaa"
      stroke-width="1" x2="12" />
    <g id="g1" transform="rotate(216)">
      <line transform="rotate(-225) translate(38 0)" stroke="#000"
        stroke-width=".5" x2="12" />
      <polygon transform="rotate(-225) translate(36 0)"
        points="0,-4.5 0,4.5 5,0" fill="#000"/>
    </g>
    <text id="t1" font-family="sans-serif" font-size="20" font-weight="400"
      text-anchor="middle" dominant-baseline="middle" fill="#0b60e9">75</text>
    <text id="t2" y="10" font-family="sans-serif" font-size="9"
      font-weight="400" text-anchor="start" dominant-baseline="hanging" fill="#000">80</text>
  </g>
</svg>