如何制作筆畫SVG的邊框？

Question

我正在使用 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>

Answer 1

如果面向像素的操作並不真正需要過濾器，我不喜歡使用過濾器：它們很難理解並且性能很重。 在您的情況下，他們似乎所做的只是畫一個邊框，這是一個矢量操作。 這是一個繪制路徑的解決方案。

出於同樣的原因，這使用基於矢量的<pattern>內容而不是圖像。

（您的代碼示例既不是可執行的也不是自我解釋的，所以我忽略它。）從您提供的示例圖片看來，無論顯示的值是什么，邊框都圍繞着儀表的總面積。 這意味着它可以繪制一次，而無需參考動態數據。 然后划分代表您的值的區域的線只是將儀表區域一分為二的短垂直線。 要在正確的 position 中動態獲取它們，只需旋轉它們即可。 這些區域本身是在邊界下方單獨繪制的。

我在這里提供了動態數據作為 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>

如何制作筆畫SVG的邊框？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-08-23 16:43:54

如何制作筆畫SVG的邊框？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-08-23 16:43:54

解決方案1
0 已采納 2022-08-23 16:43:54