Is there an issue with coordinate translation in an SVG element when the element is using a viewBox and placed inside a Grid? I am trying to display an SVG diagram and allow the user to place pushpins by tapping on it. Everything works fine unless the SVG element is placed inside a Grid. Take a look at http://samples.msdn.microsoft.com/Workshop/samples/svg/coordinateTransforms/liquidSVG.html - just add that page to your project, set as start page, and it works great. Now, place the svg element in that page inside a Grid and the coordinate transformation breaks down.
Any input would be greatly appreciated.
As to grid, do you mean CSS grid layout? I have tried to put the SVG element inside a div and configured grid layout, it works fine on my side:
-ms-grid-rows: 1fr 1fr;
-ms-grid-columns: 1fr 1fr;
If you do not mean grid layout, it would be better if you can provide more details, then we will try our best to provide further suggestions for you.
Yes, I do mean a CSS Grid Layout.
The issue is not getting the SVG to lay out properly. The issue is that when you put the SVG element in a CSS Grid, coordinate transformation does not work properly. Using the link I provided in my original post... if you put that SVG circle into a CSS Grid, the coordinate transformations no longer return the correct SVG viewBox coordinates.
Does that make sense?