<text>要素でCSSトランジションを使用するには？

Question

私はsvgを使ってグラフを作っています。
私のグラフでは、<circle>に<text>があり、サークルが動き回っています。
トランジションを使用して円の動きをきれいにしましたが、使用することはできません<text>タグ
円が動いている間にテキストが円から外れます。

私はテキストが円の要素に従うようにすることができますか？

Plunker：https://plnkr.co/edit/iQZL1Pb4ozY80uFsVJaQ

var x = true; 
 
var test = function() { 
 

 
    var circleEl = document.getElementById('circle'); 
 

 
    var textEl = document.getElementById('text'); 
 

 
    if (x) { 
 
    circleEl.setAttribute('cx', '400') 
 
    textEl.setAttribute('x', '397') 
 
    x = false 
 
    } else { 
 
    circleEl.setAttribute('cx', '50') 
 
    textEl.setAttribute('x', '47') 
 
    x = true 
 
    } 
 

 
}

.circle-transition { 
 
    transition-property: all; 
 
    transition-duration: 3s; 
 
    transition-timing-function: linear; 
 
} 
 

 
.text-transition { 
 
    transition-property: all; 
 
    transition-duration: 3s; 
 
    transition-timing-function: linear; 
 
}

<svg width="1000px" heigth="200px"> 
 
    \t \t <circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red"></circle> 
 
    \t \t <text class="text-transition" id="text" y="55" x="47">1</text> 
 
    \t </svg> 
 

 
<button onclick="test()">test it!</button>

Answer 1

あなたはSVG presentation attributesを使用し、CSSでそれらをアニメーション化について少し慎重にする必要があります。たとえば、問題の説明はChromeにのみ適用されます。 Firefoxでは、円とテキストの両方がジャンプします。

CSSスタイルのプロパティ（この場合はtransform）のみを使用することをおすすめします。また、グループ化でき要素一緒に一つだけのアニメーションが必要とされるように：

var x = true; 
 
var test = function() { 
 

 
    var groupEl = document.getElementById('group'); 
 

 
    if (x) { 
 
    groupEl.setAttribute('style', 'transform:translate(350px)') 
 
    x = false 
 
    } else { 
 
    groupEl.setAttribute('style', 'transform:translate(0px)') 
 
    x = true 
 
    } 
 

 
}

.group-transition { 
 
    transition-property: all; 
 
    transition-duration: 3s; 
 
    transition-timing-function: linear; 
 
}

<svg width="1000px" heigth="200px"> 
 
    <g id="group" class="group-transition" style="transform:translate(0px)"> 
 
    \t \t <circle id="circle" r="10px" cy="50" cx="50" fill="red"></circle> 
 
    \t \t <text id="text" y="55" x="47">1</text> 
 
    </g> 
 
</svg> 
 

 
<button onclick="test()">test it!</button>

Answer 2

はIE11とエッジは、CSSはSVG要素に変換をサポートしていないことが判明。
私の回避策は、CSSトランスフォームとトランスフォームの両方の属性を使用することでした。すべてのブラウザがサークルとテキストの正しい位置を示していました（IEはそれを配置していませんでした）が、アニメーションのみがIE/Edgeでは機能しません。

var x = true; 
 
var test = function() { 
 

 
    var circleEl = document.getElementById('circle'); 
 
    var textEl = document.getElementById('text'); 
 

 
    if (x) { 
 
    circleEl.setAttribute('style', 'transform:translate(350px, 0px)') 
 
    textEl.setAttribute('style', 'transform:translate(350px, 0px)') 
 
    circleEl.setAttribute('transform', 'translate(350, 0)') 
 
    textEl.setAttribute('transform', 'translate(350, 0)') 
 
    x = false 
 
    } else { 
 
    circleEl.setAttribute('style', 'transform:translate(0px, 0px)') 
 
    textEl.setAttribute('style', 'transform:translate(0px, 0px)') 
 
    circleEl.setAttribute('transform', 'translate(0, 0)') 
 
    textEl.setAttribute('transform', 'translate(0, 0)') 
 
    x = true 
 
    } 
 

 
}

.circle-transition { 
 
    transition-property: all; 
 
    transition-duration: 3s; 
 
    transition-timing-function: linear; 
 
} 
 

 
.text-transition { 
 
    transition-property: all; 
 
    transition-duration: 3s; 
 
    transition-timing-function: linear; 
 
}

<svg width="1000px" heigth="200px"> 
 
    \t \t <circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red" style="transform: translate(0,0)" transform="translate(0, 0)"></circle> 
 
    \t \t <text class="text-transition" id="text" y="55" x="47" style="transform:translate(0,0)" transform="translate(0, 0)">1</text> 
 
    \t </svg> 
 

 
<button onclick="test()">test it!</button>