L'échelle et miroir de l'objet SVG

Comment puis-je plus facilement d'abord à l'échelle d'un objet, disons 2 * fois il est au courant de la taille, puis de le retourner verticalement et horizontalement, ou les deux?

Maintenant, je peux soit le mettre "à l'échelle(2,2)" pour qu'elle devienne 2 fois plus grand que la largeur et la hauteur, mais je ne peux pas retourner à la même échelle(-1, 1) pour la rotation verticale.

Je suis en création d'objets SVG par programme, en tant que format d'exportation.

  • transform: scale (-1, 1); transform-origin: center; est tout ce qui est nécessaire maintenant.
InformationsquelleAutor Deukalion | 2014-05-27
  1. 91

    D'appliquer à la fois l'échelle et flip, juste la liste à la fois dans votre transformation.

    transform="scale(2,2) scale(-1,1)"

    ou tout simplement de combiner les valeurs

    transform="scale(-2,2)"

    Bien sûr, le problème que vous avez avec négatif échelles est que les objets sont retournés à travers l'origine (en haut à gauche) de la SVG, donc ils peuvent aller au-delà du bord du document. Vous avez besoin de corriger cela en ajoutant un traduire ainsi.

    Ainsi, par exemple, imaginons que nous ayons un document qui est 100x100.

    <svg width="100" height="100">
    <polygon points="100,0,100,100,0,100"/>
</svg>

    À inverser verticalement nous n':

    <polygon points="100,0,100,100,0,100" transform="scale(2,-2)"/>

    et de corriger le mouvement hors de l'écran, soit nous décalage négatif avant de la retourner (donc il s'est renversé en arrière sur l'écran):

    <polygon points="100,0,100,100,0,100" transform="scale(2,-2) translate(0,-100)"/>

    (La traduction est en deuxième ici en raison de transformation de listes de l'application efficace de droite à gauche)

    ou nous pouvons nous déplacer positifs à l'échelle de la taille) par la suite:

    <polygon points="100,0,100,100,0,100" transform="translate(0,200) scale(-2,2)"/>

    Voici une démo montrant flip vertical, horizontal flip et les deux flips

    Mise à jour

    De flip (en position) un objet qui est quelque part sur l'écran. D'abord déterminer sa boite (minX, minY, maxX, maxY), ou centreX,centreY si vous savez déjà que la place.

    Puis ajouter le suivant à de sa transformation:

    translate(<minX+maxX>,0) scale(-1, 1)   //for flip X
translate(0,<minY+maxY>) scale(1, -1)   //for flip Y

    ou si vous avez le centre, vous pouvez utiliser

    translate(<2 * centreX>,0) scale(-1, 1)   //for flip X

    Donc dans votre exemple:

    <rect x="75" y="75" width="50" height="50"  transform="translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

    La minX+maxX s'élève à 200. Afin de renverser horizontalement, nous prepend:

    translate(200,0) scale(-1, 1)

    Donc l'objet final devient:

    <rect x="75" y="75" width="50" height="50"  transform="translate(200,0) scale(-1, 1) translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

    Démo ici

    • Cela aide beaucoup. Mais j'ai encore du mal à comprendre comment les enregistrer au format SVG. Sur chaque objet, vous pouvez: Miroir Vertical ou Horizontal Miroir. Là où la ligne Verticale est la moitié de la largeur, et l'Horizontale est à la moitié de la hauteur. Tiré quelque chose sur le côté gauche, il devrait apparaître sur le côté droit. Assez Simple, jusqu'à ce que chaque objet sera mis à l'échelle ou non mis à l'échelle, déplacé de son origine "x" et "y" = Traduire ou de Rotation. Je ne suis pas sûr de faire un SVG attribut transform d'elle. Je sais que les objets de centre de, la taille du document et de le Transformer, de l'Échelle, faire Pivoter les valeurs + V ou H miroir
    • Vous avez bien sûr répondu à la question, c'est juste une extension de question de mettre tout. Je n'arrive pas à mettre toutes les autres valeurs dans l'équation maintenant, quand cela est compris.
    • C'est une tentative de montrer ce que je veux dire et inclure des choses telles que la rotation, échelle dans le mélange: jsfiddle.net/kj78D/59 comme le montre le gradient est aussi à l'envers, qui indiquent une mise en miroir... maintenant, je ne suis pas sûr de l'endroit où je suis supposé mettre le "transformer" - dire si l'objet a été placé en x=75, y=75, mais a déménagé 25 dans chaque direction. Là où ça se passe, et je ne suis pas entièrement sûr de savoir pourquoi le miroir rectangle besoins "traduire(-300, -100) car ils n'ont pas de point à rien de précis, alors que les premiers objets de traduire au moins du point pour les objets de centre négatif? Ou peut-être ils ont tous deux faire.
    • Mon expérience ne fonctionnera probablement pas si j'ai mis la première la mention "annulé" rectangle sur le côté opposé (où le miroir l'un ne l'est actuellement) et de conserver les valeurs. Probablement ne va pas regarder la même chose, donc je suis probablement juste de perdre mon temps à le comprendre. J'ai essayé la mise en œuvre de certains, mais il ne fonctionne pas à chaque fois, c'est pourquoi j'ai besoin d'un bon modèle où je peux mettre toutes les choses, le faire il inversée n'importe quelles valeurs sont mis en. Les Matrices ont toujours été une douleur dans le cul.
    • Traduire À L'Échelle Flip Tourner Traduire? Dans aucun ordre particulier. Créer un rectangle à une coordonnée donnée dans le document, de le faire pivoter de quelques degrés, déplacer certaines coordonnées, mise à l'échelle à quelque chose d'autre que leur taille d'origine et enfin retourner tous donc il s'est inversée verticalement ou horizontalement renversé, ou les deux. Seul problème, c'est la conversion de mes valeurs en format SVG. Bien sûr, comme je l'ai probablement dit avant l'une de ces valeurs ne doivent pas être inclus et peut-être il y a un scénario différent pour chacun d'eux. Dire que j'ai exclure les faire pivoter ou mettre à l'échelle; probablement va aspect différent au Format SVG ainsi.
    • Je ne suis pas sûr de comprendre. Si vous donner un exemple d'un objet que vous rencontrez des problèmes en le feuilletant, je vais faire de mon mieux pour vous montrer.
    • Ma question était pour le redimensionnement d'un objet 2 fois ou en tout temps et ensuite être capable de la renverser. Cela fonctionne très bien. Mais quand j'essaie de travailler en rotation sur un objet, le mouvement d'un objet et ensuite de l'enregistrer comme SVG - il est vraiment salissant. Je suis en utilisant SVG comme format d'exportation pour mon application Android, une application de dessin. Peindre quelque chose sur l'écran, un rectangle, un chemin, d'un cercle ou quoi que ce soit et puis vous pouvez mettre à l'échelle par le biais d'outils, de le déplacer. Alors, quand il est tiré, les valeurs X et Y sont définis. À partir de là, j'utilise un "Transformer X Y" coordonner, de sorte que l'utilisateur est en mesure de réinitialiser le transformer.
    • En bref, rendre un objet mis à l'échelle, rotation et traduit, et en même temps retourné verticalement. Quand je dessine, je viens de le retourner. Fonctionne très bien. Lorsque cela est exporté au format SVG, j'ai d'abord ajouter l'objet "normal" (rectangle de le dire) et puis ajouter un autre objet (le miroir vertical), mais les valeurs à mettre dans transform="" ne fonctionne jamais comme je les voulais trop. Ainsi, un objet mis à l'échelle 2 fois, une rotation de 45 degrés et déplacé de 50 points en X et Y à partir initiale de coordonnées X et Y (ils ne changent pas à être en mesure de réinitialiser). Ensuite, mettre tout cela dans un SVG transformer, mais vous ne savez pas comment.
    • Comme je l'ai dit, qu'un prolongement de la question. Il a déjà été répondu, juste essayer de comprendre le reste. Depuis que j'ai pensé que le seul problème que j'ai eu a été inversée de l'objet, mais il semble que j'ai besoin de plus pour être en mesure de l'enregistrer correctement au format SVG. Vous ne savez pas si vous connaissez un langage de programmation, mais c'est ma variante Android ou Java: pastebin.com/gA9MSNSP, où je dessine chaque objet retourné. Vous ne savez pas comment traduire cela en SVG, même si je sais que toutes les valeurs requises. Si je l'exporter au format SVG, sans retournement, il fonctionne très bien. Lorsque j'ajoute le retournement ne fonctionne plus.
    • Ma tête me fait mal en essayant de comprendre ce que vous voulez. :/ Merci de faire un violon avec un exemple SVG que l'objet que vous souhaitez inverser. Alors dites-moi comment vous le voulez renversé. Par exemple, vous voulez qu'il soit retourné en place, ou voulez-vous tout le SVG renversé?
    • Les objets sont créés par une application Android. Pas tous les objets doivent être retournées, seulement l'un que dans l'application est définie comme la Verticale ou à l'Horizontale Miroir. Et chaque objet peut être tourné, déplacées, redimensionnées et finalement capoté. J'ai expérimenté avec toutes les valeurs, comme le violon, j'ai posté avant - où je l'ai mis à l'échelle, il, tourné et retourné, il = correctement. Mais quand j'applique cette méthode à ma méthode d'Exportation au format SVG, il n'est pas exactement de la même façon. jsfiddle.net/kj78D/59 la Seule chose que je n'ai pas fait dans ce violon est de déplacer l'objet. Enregistrer en tant que format SVG = Enregistrer normale de l'objet, si "VMirror" ensemble, ajouter retourné version
    • Je pense que je l'ai résolu. La cartographie de tout. J'ai fait quelques algorithmes d'elle. Peut-être ce qui explique mieux: pastebin.com/z7PDbusN
    • Merci. J'ai manqué que vous avez fait une mise à jour sur le post qui le site ne veut pas vous parler. De toute façon, il semble fonctionner maintenant. Seul problème restant est constitué de textes, puisque chaque TextSpan semble avoir besoin de sa propre transformation individuellement.

    InformationsquelleAutor Paul LeBeau
  2. 0

    Ici est le Livescript-ish extrait de code comment vous pouvez horizontalement flip et l'échelle par un facteur: 

        # scale is 1 by default

    if mirror or scale isnt 1
        [minx, miny, width, height] = svg.attributes.viewBox |> split-by ',' |> cast-each-as (Number)

        s = scale
        # container is the root `g` node 
        container.attributes.transform = if mirror
            "translate(#{s * (width + minx) + minx}, #{ -miny * (s-1)}) scale(#{ -s},#{s})"
        else
            "translate(#{ -minx * (s-1)}, #{ -miny * (s-1)}) scale(#{s},#{s})"

        if scale isnt 1
            svg.attributes
                ..viewBox = "#{minx},#{miny},#{width * scale},#{height * scale}"
                ..width = "#{width * scale}"
                ..height = "#{height * scale}"
    InformationsquelleAutor ceremcem
  3. -1

    De retourner toute la SVG, ci-dessous

     transform="scale(-1,1) translate(-1,0)"

    Lieu ce à SVG tag

    • Il y a déjà accepté de répondre, ce qui répond à la question complètement, plutôt que partiellement, et qui a beaucoup d'explication. Vous pouvez utiliser votre temps AFIN de mieux en répondant à des questions qui n'ont pas encore été répondu à la satisfaction de l'interlocuteur.
    InformationsquelleAutor υδαυ κυμάρ