Displaying SVGs in WPF canvas so the SVG shapes can be rotated

[WillPittenger]

I'm working on a project where some ships (represented by SVG shapes) need to be displayed on a SVG map. The ships need to be moved around the map and rotated to match a script my code follows. However, converting the ships to XAML seems to be causing problems when I rotate them. That seems to add a big margin around each shape being rotated throwing off my calculations as to where to render them.

Can you suggest a solution?

[paulushub]

Without a sample, it is not easy to pinpoint the source of the issue. Try to find what is the source of extract/boundary being generated.

1. View the SVG file in editor like InkScape and examine the actual dimension of the image.
2. Use the WpfSvgTestBox application to view the XAML generated and examine it closely.
3. You may also use applications like Kaxaml or create a default WPF application, paste in the generated XAML as below, and examine it.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Grid>
            <Image>
              <Image.Source>    
                  <DrawingImage>
                      <DrawingImage.Drawing>
                
                                     !!! Drawing here !!!
                      
                      </DrawingImage.Drawing>                
                  </DrawingImage>
              </Image.Source>
            </Image>        
		
	</Grid>
</Window>

[WillPittenger]

Does https://docs.microsoft.com/en-us/answers/questions/353322/unexpected-margin-around-rotated-shape.html help?

[paulushub]

@WillPittenger Thanks for the updates. From the posts there, the center of the rotation is not stated. So, the result may not be predictable.
Also, how are the ship drawings placed on the background drawing? (in different layers)

[WillPittenger]

@paulushub Currently, everything is just tossed into one WPF canvas.

[WillPittenger]

Should I have used a different technique?

[paulushub]

Should I have used a different technique?

For simple cases it might not matter, however, applying the transform to the RenderTransform property will most likely be more accurate.
Look at the tutorial here for more information: https://www.mooict.com/wpf-c-create-a-flappy-bird-game-in-visual-studio/
See how a rotation is applied here: https://www.mooict.com/wpf-c-create-a-flappy-bird-game-in-visual-studio/5/

[WillPittenger]

Well, I got around to looking at your suggestion. However, that tutorial doesn't rotate images. It also doesn't handle your library.

[paulushub]

I assume your converted XAML are finally rendered as Image object. If not, please give more details.

However, that tutorial doesn't rotate images. It also doesn't handle your library.

Yes, the sample does not use the SharpVectors, and the point is about the rotation which it does as shown below:
flappyBird is defined as image:

<Image Stretch="Fill" Name="flappyBird" Height="37" Width="50" Source="images/flappyBird.png" 
       Canvas.Left="20" Canvas.Top="174" />

flappyBird is rotated:

private void Canvas_KeyisDown(object sender, KeyEventArgs e)
{
	// if the space key is pressed
	if (e.Key == Key.Space)
	{
		// rotate the bird image to -20 degrees from the center position
		flappyBird.RenderTransform = new RotateTransform(-20, flappyBird.Width / 2, flappyBird.Height / 2);
		// change gravity so it will move upwards
		gravity = -8;
	}
	if (e.Key == Key.R && gameover == true)
	{
		// if the r key is pressed AND game over boolean is set to true
		// run the start game function
		startGame();
	}
}