Question

JS很新。

理论上，我正在尝试获得多个圆形SVG弧描述符来填充量表。
我的第一个Arc描述符工作得很好并且填充了我的第一个量表我想要的，我的问题是让第二个弧描述符工作以填充第二个量表。圆弧描述符根本没有填满我的第二个尺度。
调试后我知道我错过了一些我不知道的东西。

有人可以帮忙吗？

谢谢！

HTML

      <div class="ticker-body">
                <svg viewBox="19, -19 65 35" class="gauge-background" 
              fill="none">
                    <circle r="10"/>
                </svg>
                <svg viewBox="-39, -39 700 75" class="gauge" fill="none">
                    <path id="arc-path" transform="rotate(-90)" stroke-
                 linecap="circle" />
        </svg>
        </div>

         <div class="ticker-body-two">
                 <svg viewBox="4, -19 65 35" class="gauge-background-two" 
                  fill="none">
                       <circle r="10"/>
                  </svg>

                   <svg viewBox="-51, -34 450 75" class="gauge-two" fill="none">
                      <path id="arc-path-two" transform="rotate(-90)"   
                     stroke-linecap="circle" />
                        </svg>
                        </div>

JS

function describeArc(radius, startAngle, endAngle) {
// Helper function, used to convert the (startAngle, endAngle) arc
// dexcription into cartesian coordinates that are used for the
// SVG arc descriptor.
function polarToCartesian(radius, angle) {
    return {
        x: radius * Math.cos(angle),
        y: radius * Math.sin(angle),
    };
}

// Generate cartesian coordinates for the start and end of the arc.
var start = polarToCartesian(radius, endAngle);
var end = polarToCartesian(radius, startAngle);

// Determine if we're drawing an arc that's larger than a 1/2 circle.
var largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1;

// Generate the SVG arc descriptor.
var d = [
    'M', start.x, start.y,
    'A', radius, radius, 1, largeArcFlag, 0, end.x, end.y
].join(' ');    

return d;
}

 let arc = 0;

setInterval(function() {
// Update the ticker progress.
arc += Math.PI / 1000;
if (arc >= 2 * Math.PI) { arc = 0; }

// Update the SVG arc descriptor.
let pathElement = document.getElementById('arc-path');
//let pathElementTwo = document.getElementById('arc-path-two');
pathElement.setAttribute('d', describeArc(26, 0, arc));
//pathElementTwo.setAttribute('c', describeArcTwo(26, 0, arc));
 }, 400 / 0)

Javascript / SVG：如何创建多个圆形SVG弧描述符？

0 个答案: