SVG rotate deletes Elemets

Posted by user1468661 on Stack Overflow See other posts from Stack Overflow or by user1468661
Published on 2012-06-20T09:05:53Z Indexed on 2012/06/20 9:16 UTC
Read the original article Hit count: 145

Filed under:

svg

|

rotate

I'm trying to generate svg-Code in a web-application. Here's an example output:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:ev="http://www.w3.org/2001/xml-events"
  version="1.1" baseProfile="full"
   width="1000px" height="600px">
  <rect x="147.50198255352893" y="109.43695479777953" width="15.860428231562253" height="295.79698651863595" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 155.43219666931006 257.3354480570975)"/>
  <rect x="163.36241078509119" y="405.2339413164155" width="379.85725614591587" height="-23.79064234734335" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 353.2910388580491 393.3386201427438)"/>
  <rect x="543.219666931007" y="381.44329896907215" width="22.204599524187188" height="-353.6875495638382" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 554.3219666931006 204.59952418715304)"/>
</svg>

There should be three rotated Rectangles, but somehow in Chrome, Safari, and Inkscape only one of them is displayed. I did google and have no clue what is wrong. Thx for your help.

© Stack Overflow or respective owner

Related posts about svg

Firefox -- Dynamically embedding <svg> element in SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected: <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> </svg> However… >>> More
manipulate objects outside svg with javascript-function inside the svg

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello! I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible. Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call… >>> More
javascript replace text with images problem

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!! Basically, I'm trying to change every instance of a card… >>> More
SVG Salamander example?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there. I'm toying with Java and SVG Salamander but cant quiet get how to render a simple SVG file into a Jpanel. Could someone give me a brief example? Tried to follow the loose tutorial in the official site, but could not find a simple code to get a better understanding. So, some code is really… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More

Related posts about rotate

Howto rotate image using jquery rotate plugin?

as seen on Stack Overflow - Search for 'Stack Overflow'
How do you rotate an image using jquery (www.jquery.com) rotate plugin (http://code.google.com/p/jquery-rotate/)? I have tried the following and it doesn't seem to work: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>View Photo</title> <script… >>> More
Font gets enlarged when rotating screen

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I have a new ThinkPad X220 Tablet with Kubuntu 12.04. When I rotate the screen 90° with a script, the fonts of all programs that I open after the rotation have ugly huge fonts. #!/bin/sh # Find the line in "xrandr -q --verbose" output that contains current screen orientation and "strip" out… >>> More
Translate extrinsic rotations to intrinsic rotations ( Euler angles )

as seen on Game Development - Search for 'Game Development'
The problem I have is very frustrating: I am using the Jitter Physics library which gives Quaternion rotations, you can extract the extrinsic rotations but I need intrinsic rotations to rotate in OpenTK (There are other reasons as well so I don't want to make OpenTK use a Matrix) GL.Rotate(xr, 1… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More
Rotate point in rectangle

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a point in a rectangle that I need to rotate an arbitrary degree and find the x y of the point. How can I do this using javascript. Below the x,y would be something like 1,3 and after I pass 90 into the method it will return 3,1. |-------------| | * | | | | … >>> More