Hi, i want to add several SVGs to a openlayers map on specific points. The SVGs that I'm creating have a defined center, but the shapes are not of equal radius around the center.

That means when i implement them the SVG ends up on the lon/lat point but centered on the "drawing-center" but not the "center-of-interest" for me.

Can i define a "Center" of an SVG manually, that is not the "drawing-center"?

brg and thanks

As long as they are group or a single object / combined path you can just click twice until the handles change to rotation handles. Then drag the centre of rotation.

Hi, that is such a nice and easy answer, but unfortunately it does not work for me, because:

When i add it to my HMTL-map point, it does not put the "center of rotation" to my longitude/latitude point. I think the html/openlayers probably just sees the "image"-svg and centers it out from pixels(?) or size. (I dont know how better to explain it).

So, any ideas how to fix the new "center of rotation" to my fixed map-point?

If your design allows interrogating groups, you might group a small object within your image at the desired point.

Hm, "interrogating groups" is a new term for me, and i will investigate that if using my default image not working.

But "Center of rotation" is different from center of SVG (or picture) as i see it. I need to define one particular spot in my SVG as the Center, and then maybe i can adjust size of the SVG out from this point? (In  transparent Horiz/Vertical extent)

Can i "choose" one spot of the SVG as Center-of-picture, then have the "SVG-borders" adjust to that center? (That being transparent background or whatever)

tnx

Centre of rotation is a feature Inkscape uses to make editing SVGs easier, but is not part of SVG standard as far as I am aware. ( there is an SVG presentation attribute transform-origin and CSS transform-origin ).

So when your program opens the SVG, it does not see any reference to a changed centre of rotation. I suspect it just uses the calculated bounding box ( or possibly the view box or width height ) of the SVG.

I think Tyler is asking if you program will use a dummy reference point - like a group you have made. 

I have looked at the example code for svg overlay on https://openlayers.org/en/latest/examples/svg-layer.html

( I think there are other examples for adding an svg icon instead - but you get the idea )

The section 'main.js' has a code block map.addLayer

which details the creation and definition of a CSS transform for the layer - I think this is what does it.

However I have attached five 1kb svg files : One is normal, the others each have transform-origin added. 1. Attribute for svg 2. style for svg 3. attribute for object 4 . attribute in object style.

I doubt the map will look at it though, but give it a try :)

Hi, thanks.

This more or less solved it for me, i just moved it horizontally, vertically using the SVG-files own parameter:

<g transform="translate(-13.858 -79.095)">

:D