I am in the process of creating a gauge component using SVG. I'm using two strokes to show two states simultaneously. Currently, my output looks like this: enter image description here
However, I would like it to look like this:
To close off the end of the hatch part.
enter image description here
I'm not sure how to achieve closing this end...
Can <filter> and :fill be used together?
.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>