How to make SVG center float above point

Question

I have an SVG element that I need to float above the document, with the center of the SVG anchored to a relative point. E.g. then center of a rectangle should float above {75% from the left, 35% from the top}.

My current CSS is like this:

position:absolute;
left:75%;
top:35%;

but that only puts the top-left of the SVG at those coordinates. It also needs to allow for window resizing.

A negative svg translation would work, but that crops the SVG. Or can we translate to (-50, -50) without cropping?

Very new to this, and I've been googling for hours, any help appreciated!

I had a look at this, but that's only webkit: Position by center point, rather than top-left point

Answer 1

How about this?

.center-this {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}