Problem with getting an absolute coordinates

Aspose.SVG Product Family
1

I need to create a html area map for shapes in SVG image to allow users click on every shape and be redirected somewhere else. I have created code which works good for shapes which aren’t rotated. But if we have a shape with rotate transformation, I’m not able to get correct coordinates.
Here is a sample app:
TestApp.zip (6.8 KB)

Steps to reproduce:

  1. Open project in Visual Studio and run it
  2. Choose a destination folder and press the button
  3. In the destination folder you will find file svg_with_areas.html which contains area map
  4. Open in in the browser and check two shapes with caption: jk (1) and khgkh (2)
    See the screenshot:
    screen.png (35.3 KB)
    Shape with number 2 works good, there is a correct map element which allows you to click on this specific shape
    But shape with number 1 doesn’t work. There is of course map created for this element but the coordinates are wrong. After the analysis, it looks like rotate transformation is a problem. I’m not sure if this is a bug in Aspose.Svg or my code is not good, so could you help me solving this problem?

Thanks a lot!

2

@ManMasterDevelopment

We have logged an investigation ticket as SVGNET-211 in our issue tracking system for further analysis on this case. We will look into its details and keep you posted with the status of its correction. Please be patient and spare us some time.

We are sorry for the inconvenience.

3

@ManMasterDevelopment

The issue arises from how the transformation matrix is used to calculate the coordinates of the area map in your original code. In SVG transformations, the matrix elements [A, B, C, D, E, F] represent the transformation as follows:

[A, C, E]
[B, D, F]
[0, 0, 1]

In your original code, you were only using the elements [A, D, E, F] of the matrix ctm to calculate the coordinates. However, when the SVG element is rotated, the elements [B, C] also play a role in determining the position and size after the transformation.

To accurately calculate the position and size of rotated SVG elements, you should take into account the complete transformation matrix. You can use the provided code that utilizes the System.Windows.Media.Matrix to perform the transformation on the rectangle’s coordinates.

Here’s the corrected code snippet that you can use:

var matrix = new System.Windows.Media.Matrix(ctm.A, ctm.B, ctm.C, ctm.D, ctm.E, ctm.F);
var rect = new System.Windows.Rect(x1, y1, width, height);
rect.Transform(matrix);

builder.AppendLine(
    $"<area target=\"_top\"  href=\"{id}\" coords=\"{rect.Left.ToString(c)},{rect.Top.ToString(c)},{rect.Right.ToString(c)},{rect.Bottom.ToString(c)}\" "
    + $"shape=\"rect\" origTitle=\"{caption}\" TITLE=\"{caption}\" ALT=\"{caption}\" >"
);

This code correctly uses the entire transformation matrix to calculate the position and size of the rectangle after applying the transformation, even when rotations are involved. With this approach, the generated HTML area map will accurately represent the clickable areas for both rotated and non-rotated SVG elements.