L'échelle de chemin d'accès depuis le centre de l'

J'ai le texte suivant SVG graphique:

<svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</svg>

Je veux modifier par programmation à l'échelle de cet objet, mais je veux qu'il à l'échelle de la d'un point central.

J'ai essayé de l'enroulant autour d'un <g> balise, comme

<g transform="translate(0,0)">
<path x="0" y="0" id="control" transform="scale(2)">...</path>
</g>

Mais cela ne semble pas fonctionner. J'ai été à la recherche en ligne et il semble que la mise à l'échelle d'un chemin d'accès requiert la manipulation de l'chemins de la matrice, ce qui semble terrible et difficile. Fâcheusement, il est facile de l'échelle à l'aide de l'additif="somme" de la propriété, mais dans ce cas je ne suis pas à l'aide d'une transformation de l'animation.

Quelqu'un peut-il m'aider?

Edit: Réussi à obtenir que cela fonctionne parfaitement, pour quelqu'un qui est coincé sur la même chose, voici une belle façon de faire par programmation:

var elem = document.getElementById("control");
var bBox = elem.getBBox();
var scaleX = 2;
var scaleY = 2;
$(elem).attr("transform", "scale("+scaleX+", "+scaleY+") translate("+-bBox.width/2+","+-bBox.height/2+") ");

InformationsquelleAutor Hanpan | 2012-07-26

html5 svg

32

Si vous connaissez les coordonnées du point central, alors vous pouvez combiner une de traduire et de gamme dans une transformation. La traduction est calculé comme suit: (1 - scale) * currentPosition.

Si le centre est (10, 20) et vous êtes à la mise à l'échelle par 3 puis traduire par (1 - 3)*10, (1 - 3)*20 = (-20, -40):
```
<g transform="translate(-20, -40) scale(3)">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</g>
```
Les transformations sont appliquées dans l'ordre inverse de celui qu'ils sont déclarés, donc dans l'exemple ci-dessus, le scale est effectuée en premier, puis le translate. Mise à l'échelle affecte les coordonnées de sorte que la traduction est ici dans l'échelle des coordonnées.

Vous pouvez calculer le centre point par programmation à l'aide element.getBBox().
- Merci pour vous la réponse comme correcte lorsque je le peux. De l'intérêt, de l'élément.getBBox() retourne juste une SVG rect avec les valeurs de la hauteur: 43.5, largeur: 54, x: 0, y: 0... dois-je utiliser les valeurs de largeur et hauteur / 2?
- Oui, exactement le point central est (width / 2 + x, height / 2 + y).
- Notez que si le chemin n'est pas à 0, 0, vous devez ajouter le bbox.x & bbox.y valeurs pour le calcul, par exemple (1-scale) * (bbox.x + bbox.width/2)
- Je crois que vous pouvez éviter les maths pour le centre en faisant une traduction supplémentaire. Exemple, si le centre est (cx, cy) vous pouvez faire transform="translate(cx, cy) scale(3) translate(-cx, -cy)"
- Aussi regarder celui-ci pour l'exhaustivité.
InformationsquelleAutor ᴇʟᴇvᴀтᴇ

Vous pouvez modifier l'origine au centre: la

.scaled-path-svg {
  svg {
    path {
      transform-origin: center;
      transform: scale(1.1);
    }
  }
}

Merci! Tel un épargnant de vie

InformationsquelleAutor Elad Amsalem

1

La réponse fournie par aetheria plus tôt est grande. Il y a une autre chose à prendre soin de ainsi -- largeur du trait, de sorte que le contour des séjours de la même largeur tout l'objet des échelles. Utilisation:
```
stroke-width: (1/scaling-factor)
```
Donc, si votre mise à l'échelle est de dire 2, alors:
```
stroke-width: (0.5)
```
REMARQUE: Vous ne devriez pas missout la transform: translate(...) scale(2) comme mentionné par aetheria.

InformationsquelleAutor Ethan

Vous devez vous connecter pour publier un commentaire.