如何制作笔画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