我正在使用SVG制作仪表组件。两个笔划用于同时显示两种状态。我目前的结果是这样的。在此处输入图像描述
在此处输入图像描述
想做这样的。阻挡阴影部分的末端。在此处输入图像描述我不知道该怎么结束。。。<filter>和：fill可以一起使用吗？
.circle-front {
stroke-dasharray: 120;
stroke: #333;
stroke-width: 5.5px;
transform: translate(2px, 5px) rotate(148deg);
transform-origin: center;
}
.circle-back {
stroke-dasharray: 120;
stroke-dashoffset: 39;
stroke: rgba(255, 255, 255, 0.2);
transform: translate(2px, 5px) rotate(148deg);
stroke-width: 5;
transform-origin: center;
}
.circle-oblique {
stroke-dasharray: 120;
/* stroke: #333; */
stroke-linejoin: round;
stroke-width: 4.5px;
transform: translate(2px, 5px) rotate(148deg);
transform-origin: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg
width="110"
height="110"
viewBox="0 0 60 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_d_711_531)">
<circle cx="29.7727" cy="30.2273" r="19" className="circle-back" />
</g>
<circle
cx="29.7727"
cy="30.2273"
r="19"
stroke="url(#vertical-stripe-2)"
className="circle-oblique"
strokeDashoffset="90"
/>
<defs>
{" "}
<pattern
id="vertical-stripe-2"
patternUnits="userSpaceOnUse"
width="2"
height="2"
>
{" "}
<image
xlinkHref="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMicgaGVpZ2h0PScxMCcgZmlsbD0nYmxhY2snIC8+Cjwvc3ZnPg=="
x="0"
y="0"
width="2"
height="2"
>
{" "}
</image>{" "}
</pattern>{" "}
</defs>
<circle
cx="29.7727"
cy="30.2273"
r="19"
className="circle-front"
strokeDashoffset="43"
/>
<defs>
<filter id="filter0_d_711_531">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 0"
/>
<feOffset />
<feGaussianBlur stdDeviation="0.3" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0"
/>
</filter>
</defs>
</svg>
</body>
</html>如果面向像素的操作并不真正需要过滤器，我不喜欢使用它们：它们很难理解，而且性能很重。在你的例子中，他们似乎只需要画一个边界，这是一个向量运算。这是一个绘制路径的解决方案。
出于同样的原因，这使用了基于矢量的<pattern>内容而不是图像。
(您的代码示例既不可执行，也不自我解释，所以我忽略了它。(从您提供的示例图片来看，无论显示的值是多少，边框似乎都围绕着仪表的总面积。这意味着它可以绘制一次，而不需要任何动态数据。然后，划分代表您的值的区域的线就是平分仪表区域的短垂直线。要使它们动态地处于正确的位置，需要旋转它们。这些区域本身是在边界下方单独绘制的。
我在这里提供了作为CSS变量的动态数据，但通过一些JS脚本插入它们应该很容易，只需将引用它们的CSS属性替换为适当的插入值的方式，可能是在表示属性中。
svg {
height: 100vh;
--val1: 0.4;
--val2: 0.6;
}
symbol {
overflow: visible;
}
.area {
fill:none;
stroke-width: 15;
}
.stroke {
fill:none;
stroke: #333;
stroke-width: 2;
stroke-linejoin: round;
}
#area-1 {
stroke: #333;
stroke-dasharray: calc(var(--val1) * 100px) 100px;
}
#limit-1 {
transform: rotate(calc(45deg + var(--val1) * 270deg));
}
#area-2 {
stroke: url(#hatch);
stroke-dasharray: calc(var(--val2) * 100px) 100px;
}
#limit-2 {
transform: rotate(calc(45deg + var(--val2) * 270deg));
}<svg viewBox="-60 -60 120 120">
<symbol id="limit">
<path d="M 0,41 V 54" />
</symbol>
<pattern id="hatch" patternUnits="userSpaceOnUse" width="16" height="8">
<path class="stroke" d="M -2,-6 18,4 M -2,2 18,12 M -2,10 18,20" />
</pattern>
<!-- data areas in reverse order -->
<path id="area-2" class="area" d="M -33.588,33.587 A 47.5,47.5 0 1 1 33.588,33.588" pathLength="100" />
<path id="area-1" class="area" d="M -33.588,33.587 A 47.5,47.5 0 1 1 33.588,33.588" pathLength="100" />
<g class="stroke">
<!-- static outer border -->
<path d="M -38.184,38.184 A 54,54 0 1 1 38.184,38.184 L 28.991,28.991 A 41,41 0 1 0 -28.991,28.991 Z" />
<!-- bisecting data lines, cited from a template -->
<use id="limit-1" href="#limit" />
<use id="limit-2" href="#limit" />
</g>
</svg>