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

Post both your HTML code and CSS – Asons Mar 01 '14 at 12:36 — Asons, Mar 01 '14 at 12:36

score 1 · Accepted Answer · edited Mar 01 '14 at 13:28

1

How about this?

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

edited Mar 01 '14 at 13:28

Ex-iT

1,479
2
12
20

answered Mar 01 '14 at 13:24

defghi1977

5,081
1
30
29

Ah, there's a CSS transform property!! Thanks from a beginner!! – babyjet Mar 01 '14 at 13:35

How to make SVG center float above point

1 Answers1