我將如何在Javascript中向頁面顯示動態的縮放/縮放SVG轉換？

Question

我有一個使用@keyframes動畫的兩個圓圈的SVG。我想展示這個圈子增長的價值。使用javascript我想在縮小和增長時顯示值。 getTotalLength（）可能不是我應該使用的，但不確定我正在查找的大小/值檢查的名稱。

My codepenan example of how it would look

// console.log("DOM Ready!"); 
 
// // setInterval, changes global var, translates the size of the val. 
 
// // ever second or two 
 
// // point 0.1 means 10px 
 

 
// // displaying each circle's value as they grow and shrink 
 
// var redValue = document.getElementById('red-grow').innerHTML = span; 
 
// // var greenValue = document.getElementById('green-grow').innerHTML = 
 

 
// var redCircle = document.getElementsByClassName('red'); 
 
// var greenCircle = document.getElementsByClassName('green'); 
 
// var current = 0; 
 
// var width = 0; 
 
// var destination = 700; 
 
// var friction = 0.04; 
 

 
// // scaling up both circles 
 
// function scaleUp() { 
 
//  // console.log(scaleUp); 
 
//  current += (destination - current) * friction; 
 
//  redCircle[0].style.width = (current * 0.5 + 'px'); 
 
//  greenCircle[0].style.width = (current * 0.5 + 'px'); 
 
//  if (current >= destination - 0.1) { 
 
//  // clearInterval(redAnimate); 
 
//  } 
 
// } 
 
// var redAnimate = setInterval(scaleUp, 20); 
 

 
// // scaling down both circles 
 
// function scaleDown() { 
 
//  //console.log(redCircle[0].style, greenCircle[0].style); 
 
//  current += (destination - current) * friction; 
 
//  redCircle[0].style.width = (current * 0.5 + 'px'); 
 
//  greenCircle[0].style.width = (current * 0.5 + 'px'); 
 
//  if (current >= destination - 0.1) { 
 
//  // clearInterval(greenAnimate); 
 
//  } 
 
// } 
 
// var greenAnimate = setInterval(scaleDown, 20);

body { 
 
    background-color: #584E56; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: 10px 0; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 2.4rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .3rems; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
.red, .green { 
 
    transform-origin: 60% 60%; 
 
    -webkit-animation: zoom 1s ease-in-out infinite alternate; 
 
    animation: zoom 1s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes zoom { 
 
    from { 
 
    transform: scale(1, 1); 
 
    } 
 
    to { 
 
    transform: scale(0.7, 0.7); 
 
    } 
 
} 
 

 
.timeline {}

<h1>Animation SVG</h1> 
 

 
    <span class="" id="red-grow"> 
 
     <!-- display here the red circle's value when growing and shrinking --> 
 
     Value: 
 
    </span> 
 
    <span class="" id="green-grow"> 
 
     <!-- display here the green circle's value when growing and shrinking --> 
 
     Value: 
 
    </span> 
 
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> 
 
     <path fill="none" d="M-1-1h502v302H-1z"/> 
 
     <g> 
 
     <path class="timeline" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="4.5" stroke="#000" fill="none" d="M39.5 31.5v239M463.5 269.5l-422-1"/> 
 
     <ellipse class="red" id="inner" stroke="#e5a3a3" ry="65.5" rx="67" cy="165" cx="158.5" stroke-width="4.5" fill="none"/> 
 
     <ellipse class="green" stroke="#98FB98" ry="65.5" rx="67" cy="165" cx="361.5" stroke-width="4.5" fill="none"/> 
 
     </g> 
 
    </svg>

Answer 1

動畫transform屬性的當前值可使用getComputedStyle()方法來提取。這返回一個字符串形式的矩陣，然後需要從中提取比例值。

下面是一個以百分比形式顯示當前比例的示例解決方案。

var redCircle = document.getElementsByClassName('red')[0]; 
 
var greenCircle = document.getElementsByClassName('green')[0]; 
 

 
var redLabel = document.getElementById('red-grow'); 
 
var greenLabel = document.getElementById('green-grow'); 
 

 
function updateLabels() 
 
{ 
 
    var transformValue = getComputedStyle(redCircle).getPropertyValue('transform'); 
 
    // transformValue is a string of the form "matrix(1, 0, 0, 1, 0 ,0)". 
 
    // For this example the first number in the matrix corresponds to the scale. 
 
    // We'll use a regular expression to extract it. 
 
    var currentScale = transformValue.match(/matrix\(([\d.]+)\,/)[1]; 
 

 
    redLabel.textContent = Math.round(currentScale * 100) + '%'; 
 

 
    requestAnimationFrame(updateLabels); 
 
} 
 

 
requestAnimationFrame(updateLabels);

body { 
 
    background-color: #584E56; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: 10px 0; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 2.4rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .3rems; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
.red, .green { 
 
    transform-origin: 60% 60%; 
 
    -webkit-animation: zoom 1s ease-in-out infinite alternate; 
 
    animation: zoom 1s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes zoom { 
 
    from { 
 
    transform: scale(1, 1); 
 
    } 
 
    to { 
 
    transform: scale(0.7, 0.7); 
 
    } 
 
} 
 

 
.timeline {}

<h1>Animation SVG</h1> 
 

 
    <span class="" id="red-grow"> 
 
     <!-- display here the red circle's value when growing and shrinking --> 
 
     Value: 
 
    </span> 
 
    <span class="" id="green-grow"> 
 
     <!-- display here the green circle's value when growing and shrinking --> 
 
    </span> 
 
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> 
 
     <path fill="none" d="M-1-1h502v302H-1z"/> 
 
     <g> 
 
     <path class="timeline" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="4.5" stroke="#000" fill="none" d="M39.5 31.5v239M463.5 269.5l-422-1"/> 
 
     <ellipse class="red" id="inner" stroke="#e5a3a3" ry="65.5" rx="67" cy="165" cx="158.5" stroke-width="4.5" fill="none"/> 
 
     <ellipse class="green" stroke="#98FB98" ry="65.5" rx="67" cy="165" cx="361.5" stroke-width="4.5" fill="none"/> 
 
     </g> 
 
    </svg>

然而，在我看來，它可能是更直接地避免使用CSS動畫，而是更新變換圓半徑或自己在requestAnimationFrame()功能。