时间戳

首页 > 解决方案 > SVG 和 JS。传递值属性

javascript - SVG 和 JS。传递值属性

问题描述

如何将值从 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>

标签： javascriptsvg

解决方案

我不完全确定你的意思，但如果你想将属性“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>

我在脚本标签内创建了函数 transfer，可以将其添加到页面末尾的标签之前。在该函数中，我搜索了类名为“circle-chart__circle”的标签，并将其引用存储在变量 src 中。比我对类名“circle-chart__percent”的标签做同样的事情，并将它的引用存储在trgt中。接下来，我将属性“stroke-dasharray”添加到 trgt 引用的标记中。

完成我称为转移的过程。

推荐阅读