SVG, applying transform="rotate()" and conversion issues
Posted: 2007-03-05T18:20:25-07:00
So, I created several ellipses on top of each other, and the svg looks great, you can see it here:
http://www.deliciousbanner.com/imageMag ... es/167.svg
But the png ImageMagick rendered moved the rotated elements way off of where the svg shows it. You can see the png here:
http://www.deliciousbanner.com/imageMag ... es/167.png
And here's the code:
I'm imagining I've hit some problem with my transform="rotate()" function. Can anybody help me resolve this? You'd get major kudos in my book.
http://www.deliciousbanner.com/imageMag ... es/167.svg
But the png ImageMagick rendered moved the rotated elements way off of where the svg shows it. You can see the png here:
http://www.deliciousbanner.com/imageMag ... es/167.png
And here's the code:
Code: Select all
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150px" height="150px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="75" cy="75" rx="60" ry="20"
fill="rgb(0,255,0)" fill-opacity="1"
stroke-width="5" stroke="rgb(0,200,0)" stroke-opacity="1" />
<ellipse cx="75" cy="75" rx="20" ry="60"
fill="rgb(0,0,255)" fill-opacity="0.5"
stroke-width="5" stroke="rgb(0,200,0)" stroke-opacity="0.5" />
<ellipse cx="75" cy="75" rx="20" ry="60"
fill="rgb(255,0,255)" fill-opacity="0.5"
stroke-width="5" stroke="rgb(0,200,0)" stroke-opacity="0.5"
transform="rotate(45 75 75)" />
<ellipse cx="75" cy="75" rx="20" ry="60"
fill="rgb(255,0,255)" fill-opacity="0.5"
stroke-width="5" stroke="rgb(0,200,0)" stroke-opacity="0.5"
transform="rotate(-45 75 75)" />
</svg>