Coordinate Container Percent Mode: Button Drifts Off-Center Inside Frame

Ignition
1

Hello,

I’m facing an issue with component alignment within a percent mode coordinate container in Ignition’s Perspective module. Let me explain the scenario:

  • I have a frame (SVG file) with 1.0 x 1.0 dimensions.
    SVG Frame

  • I’ve placed buttons that should be centered within the frame.

Well centered buttons
Well centered buttons1310×613 85.8 KB

However, when I resize the container, the buttons becomes off-center relative to the frame. I want to maintain perfect alignment regardless of the container size.

Off-centerd buttons
Off-centerd buttons953×402 44.6 KB

Here is what I tried :

  • Changing props.fit.mode of the image component
  • Embeding it in flex containers

Questions:

  1. How can I ensure that the button stays centered within the frame even when the container size changes?
  2. Are there any specific properties or techniques I should use to achieve this?

Any insights or suggestions would be greatly appreciated! Thank you in advance.

2

Update:

I found a solution for my problem, but it may not work for all cases.

By converting my image to PNG, I was able to stretch it and therefore keep the buttons inside their frames.

Centerd Buttons
Centerd Buttons601×587 39.5 KB

Centerd Buttons
Centerd Buttons745×438 37.4 KB

3

Tip: There's a Solution button below your second post. (Maybe it doesn't appear if the forum detects that you are the original poster?) That's the proper way to mark a question solved - not editing the title.

It's not clear what you're trying to do with the SVG. Why do you need a frame on the buttons when they have borders?

4

I tried to be as general as possible on the post but the reason why I wanted a frame is because I need to split a map in zones and make the zones clickable.
The map being my svg and the zones being my buttons.