Je crée un graphique avec svg et je veux rendre les choses jolies.
Dans mon graphique, j'ai un <circle> avec <text> à l'intérieur, et le cercle se déplace.
J'ai utilisé des transitions pour rendre mon cercle joli, mais je ne peux pas l'utiliser avec les balises <text>
Le texte sort du cercle pendant que le cercle se déplace.

Que puis-je faire pour que le texte suive l'élément cercle?

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">
    		<circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red"></circle>
    		<text class="text-transition" id="text" y="55" x="47">1</text>
    	</svg>

<button onclick="test()">test it!</button>
2
Wilker Ribeiro 4 avril 2017 à 20:26

2 réponses

Meilleure réponse

Il s'avère que IE11 et Edge ne prennent pas en charge les transformations CSS sur les éléments SVG.
Ma solution de contournement était d'utiliser à la fois l'attribut CSS Transform et Transform, de cette façon tous les navigateurs affichent le cercle et la bonne position du texte (IE ne le positionnait pas du tout), mais seules les animations ne fonctionnent pas dans 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">
    		<circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red" style="transform: translate(0,0)" transform="translate(0, 0)"></circle>
    		<text class="text-transition" id="text" y="55" x="47" style="transform:translate(0,0)" transform="translate(0, 0)">1</text>
    	</svg>

<button onclick="test()">test it!</button>
0
Wilker Ribeiro 6 avril 2017 à 12:40

Vous devez être un peu prudent lorsque vous utilisez attributs de présentation SVG et animez les avec CSS. Par exemple, la description de votre problème ne s'applique qu'à Chrome. Dans Firefox, le cercle et le texte sautent.

Il est préférable d'utiliser uniquement les propriétés de style CSS, dans ce cas transform. De plus, vous pouvez regrouper des éléments afin qu'une seule animation soit nécessaire:

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)">
    		<circle id="circle" r="10px" cy="50" cx="50" fill="red"></circle>
    		<text id="text" y="55" x="47">1</text>
    </g>
</svg>

<button onclick="test()">test it!</button>
0
ccprog 4 avril 2017 à 19:13