Estoy empezando con SVG y ahora estoy tratando de salir de los objetos en rotación.

Tengo la inicial de lona y he creado mi propia función de arrastrar y soltar, etc mousedown el arrastre se inicializa y mouseup se detiene. El problema que estoy teniendo es que cuando me rotar un objeto, que parece cambiar la x y la y. Esto es visible cuando estoy tratando de arrastrar un objeto. ¿Alguien sabe cómo conseguir alrededor de esto, así que la x y la y «normalizado» en relación a la rotación de ángulo?

Aquí está mi código.

<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>

Gracias

InformationsquelleAutor tmutton | 2012-02-29

1 Comentario

  1. 4

    rotate parámetros de darle el ángulo y el centro de rotación (ver MDN por ejemplo). ¿Y qué acerca de la width y height atributos en su texto, de todos modos? Esto no es parte de la norma de aquí. Si desea cambiar el tamaño del texto, hacerlo a través de los font-size en el estilo.

    Si quieres girar el texto en torno a su (el texto del elemento) centro puede utilizar por ejemplo el siguiente:

    <?xml version="1.0" encoding="UTF-8"?>
    <svg version="1.1" width="900" height="400"  xmlns="http://www.w3.org/2000/svg">
       <text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;">
         SVG test 
       </text>
     </svg>
    • Los atributos width y height se me acaba de cachondeo. Por desgracia, el código no me funciona, no tuvo los mismos resultados que la vez pasada. Desde mi entender, el x y y están en la parte superior izquierda del objeto, pero cuando el objeto se gira el el x y el punto y se mueve con la rotación. Así que no los atributos de estilo de ser «superior izquierda» o el equivalente de?
    • Podría dar un jsfiddle con su drag&drop se incluye el código?
    • Aquí tienes jsfiddle.net/pKwkj/2 Hay un montón de basura en la página como solo estoy probando cosas. Sobre la carga de la página, haga clic en el enlace de Texto en la esquina superior izquierda de la página y podrás ver algunos de texto aparecen en la parte izquierda de la pantalla (es posible arrastrar). Haga clic en el evento que se está añadiendo el objeto de texto es de $(‘.agregar.texto’).haga clic en
    • Es solo una idea, no estoy familiarizado con JQuery SVG. El uso de un animateTransform elemento para hacer la mudanza en lugar del elemento de texto.
    • Estoy luchando para conseguir animateTransform a trabajar con el plugin de jquery que estoy usando. Me gustaría evitar el uso de que de todos modos, yo sólo quiero cambiar el valor en el control. Para mantenerlo limpio.
    • La única cosa que me hizo fue frustrado, al girar y el objeto, establecer la posición x e y sería difícil. Si la persona con este problema, utilice translate antes de rotating para transformar su estilo.

Dejar respuesta

Please enter your comment!
Please enter your name here