Comment définir l'origine de la transformation dans SVG

Question

J'ai besoin de redimensionner et de faire pivoter certains éléments dans un document SVG en utilisant le javascript. Le problème est que, par défaut, il applique toujours la transformation autour de l'origine à (0, 0) - en haut à gauche.

Comment puis-je redéfinir ce point d'ancrage de transformation ?

J'ai essayé d'utiliser le transform-origin mais cela n'a aucune incidence.

C'est comme ça que j'ai fait :

svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');

Il ne semble pas définir le point pivot au point que j'ai spécifié, bien que je puisse voir dans Firefox que l'attribut est correctement défini. J'ai essayé des choses comme center bottom et 50% 100% avec et sans parenthèses. Rien n'a fonctionné jusqu'à présent.

Quelqu'un peut-il m'aider ?

Answer 1

Juste pour clarifier le transform-origin usage, il manque une virgule entre les valeurs x et y :

svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');

devrait être :

svg.getDocumentById('someId').setAttribute('transform-origin', '75,240');

Answer 2

La définition de l'attribut ( transform-origin="center" ) de l'élément incorporé juste à l'intérieur du DOM a fait l'affaire pour moi.

          <circle
          fill="#FFFFFF"
          cx="82"
          cy="81.625"
          r="81.5"
          transform-origin="center"
        ></circle>

Fonctionne bien avec l'utilisation des transformations css

Answer 3

J'ai eu un problème similaire. Mais j'utilisais D3 pour positionner mes éléments, et je voulais que le transformer et transition à traiter par CSS. Il s'agit de mon code original, que j'ai réussi à faire fonctionner dans Chrome 65 :

//...
this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('transform-origin', (d,i)=> `${valueScale(d.value) * Math.sin( sliceSize * i)} 
                                     ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)}`)
//... etc (set the cx, cy and r below) ...

Cela m'a permis de définir le cx , cy et transform-origin en javascript en utilisant les mêmes données.

MAIS cela n'a pas fonctionné dans Firefox ! Ce que j'ai dû faire, c'est envelopper le circle dans le g et translate en utilisant la même formule de positionnement que ci-dessus. J'ai ensuite ajouté le circle dans le g et définir son cx et cy à des valeurs 0 . De là, transform: scale(2) s'étendrait à partir du centre, comme prévu. Le code final ressemblait à ceci.

this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('g')
  .attrs({
    class: d => `dot ${d.metric}`,
    transform: (d,i) => `translate(${valueScale(d.value) * Math.sin( sliceSize * i)} ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)})`
  })
  .append('circle')
  .attrs({
    r: this.opts.dotRadius,
    cx: 0,
    cy: 0,
  })

Après avoir effectué ce changement, j'ai modifié mon CSS pour cibler l'image de l'utilisateur. circle au lieu de la .dot pour ajouter le transform: scale(2) . Je n'ai même pas eu besoin d'utiliser transform-origin .

NOTES :

1. J'utilise d3-selection-multi dans le deuxième exemple. Cela me permet de passer un objet à .attrs au lieu de répéter .attr pour chaque attribut.

2. Lorsque vous utilisez un littéral de modèle de chaîne, tenez compte des sauts de ligne, comme illustré dans le premier exemple. Ceci inclura une nouvelle ligne dans la sortie et peut casser votre code.