Javascript SVG和JS。传递值属性

如何将svg属性数组中的值转换为标记文本class=“圆形图表\百分比”？这对于js来说是可取的，而不需要jquery

<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" 
   width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart__background" stroke="#efefef" stroke- 
   width="0.5" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__circle" stroke="#00acc1" stroke-width="0.5" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<g class="circle-chart__info">
<text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">30%</text>
<text class="circle-chart__subline" x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="2">Yay 30% progress! 
</text>
</g>
</svg>

<style>
  .circle-chart__circle {
     animation: circle-chart-fill 2s reverse; /* 1 */
     transform: rotate(-90deg); /* 2, 3 */
     transform-origin: center; /* 4 */
   }
   .circle-chart__circle--negative {
     transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
    }
   .circle-chart__info {
     animation: circle-chart-appear 2s forwards;
     opacity: 0;
     transform: translateY(0.3em);
   }
   @keyframes circle-chart-fill {
      to { stroke-dasharray: 0 100; }
   }
   @keyframes circle-chart-appear {
      to {
        opacity: 1;
        transform: translateY(0);
      }
   }
 </style>

30%
耶，30%的进步！
.圆图{
动画：圆图填充2秒反转；/*1*/
变换：旋转（-90度）；/*2,3*/
变换原点：中心；/*4*/
}
.circle-chart\uuu circle--负数{
变换：旋转（-90度）比例（1，-1）；/*1,2,3*/
}
.圆图信息{
动画：圆形图表向前显示2秒；
不透明度：0；
变换：translateY（0.3em）；
}
@关键帧圆图填充{
到{stroke dasharray:0 100；}
}
@出现关键帧圆图{
到{
不透明度：1；
变换：translateY（0）；
}
}

在纯JavaScript中，您可以尝试以下操作：

var svg = document.getElementsByTagName('circle')[1];
var att = svg.getAttribute('stroke-dasharray');
var text = document.querySelector('text.circle-chart__percent');
text.textContent = att;

---

具有属性

stroke dasharray

的圆是第二个圆，因此可以使用

document.getElementsByTagName（'circle'）[1]获得该圆

并且只有一个元素具有类

圆图百分比
，因此可以使用
document.querySelector（'text.circle-chart\uuu center'）
，
我不太清楚您的意思，但是如果您想将属性“stroke dasharry”添加到具有类名称“circle-chart\uu center”的文本标记中，下面是纯javascript的解决方案，您可以将其添加到您的网页中

<script>

function transfer() {
  var src = document.getElementsByClassName("circle-chart__circle")[0],
      trgt = document.getElementsByClassName("circle-chart__percent")[0];
  trgt.setAttribute("stroke-dasharray",src.getAttribute("stroke-dasharray"));
}
transfer();    

</script>


函数转移（）{
var src=document.getElementsByClassName（“圆图”\uuuu圆”）[0]，
trgt=document.getElementsByClassName（“圆图百分比”）[0]；
trgt.setAttribute（“stroke dasharray”，src.getAttribute（“stroke dasharray”）；
}
转移（）；

我在一个脚本标记中创建了函数传输，可以将它添加到页面末尾标记之前。在该函数中，我搜索了类名为“circle-chart\uuu circle”的标记，并将其引用存储在变量src中。然后我对类名为“circle-chart_uuPercent”的标记执行了相同的操作，并将其引用存储在trgt中。接下来，我将attibute“stroke dasharray”添加到trgt引用的标记中

为了完成这个过程，我调用了transfer。
虽然这段代码可以回答这个问题，但通常最好添加一些解释。你做了什么来解决这个问题？只有代码的答案往往对其他读者没有用处，因此会吸引反对票。请看@Jessedbruijne，我想跳过它，而不是解释非常简单的术语。