SVG, Grid and Coordinate Translation

Question

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.

Thanks,

Jeff

Answer 1

Hi,

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:

        #container {
            display: -ms-grid;
            -ms-grid-rows: 1fr 1fr;
            -ms-grid-columns: 1fr 1fr;
            height: 100%;
        }

        #svgElement {
            -ms-grid-column: 2;
            -ms-grid-row-span: 2;
        }

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.

Best Regards,

Ming Xu.

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail].
Microsoft One Code Framework

Answer 2

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?

Jeff