Question

如何将值a从svg属性stroke-dasharray传递到标签文本class =“ circle-chart__percent”？这是使用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>

Answer 1

在纯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];来获得，而类circle-chart__percent中只有一个元素，因此可以使用{{1 }}。

Answer 2

我不确定您的意思是什么，但是如果您想将属性“ stroke-dasharry”添加到具有类名“ circle-chart__percent”的文本标签中，那么下面是纯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>

我在脚本标签内创建了函数传递，可以将其添加到标签末尾的页面末尾。在该函数中，我搜索了类名称为“ circle-chart__circle”的标签，并将其引用存储在变量src中。我对类名称为“ circle-chart__percent”的标记进行了同样的操作，并将其引用存储在trgt中。接下来，我在trgt引用的标签中添加了“ stroke-dasharray”字样。

为完成此过程，我称之为转移。

SVG和JS。转移值属性

2 个答案: