topic SVG Rotation around Anchor Point in ArcGIS JavaScript Maps SDK Questions

SVG Rotation around Anchor Point

AddisonShaw — Fri, 13 Dec 2024 18:38:06 GMT

I've got an SVG I'd like to rotate based on a specific angle, represented in degrees. The SVG in question is a 2D cone (essentially a triangle with a rounded end) that has the apex of the cone at the bottom-middle of the SVG.

My question is around the possibility of rotating the SVG around that apex, or more generally around a specific anchor point on the SVG itself. Is this possible to achieve without a custom trigonometric transformation function?

Re: SVG Rotation around Anchor Point

JamesIng — Tue, 17 Dec 2024 20:06:42 GMT

Can you provide a bit more context of what you're trying to achieve as the end result?
Is this just in general or something you wanting to implement in the context of a map?

For instance if its just for HTML content - you can rotate a svg around an anchor point using css

https://css-tricks.com/transforms-on-svg-elements/

Re: SVG Rotation around Anchor Point

AddisonShaw — Tue, 17 Dec 2024 20:25:06 GMT

Ah, yeah I guess I'm missing the ArcGIS specific context. I'm working with PictureMarkerSymbols that have their URL pointed towards a hosted static SVG asset. One thing I could do is to add padding around the cone SVG, so that the apex of the cone is literally in the center of the SVG's view. This would make rotation trivial, but I only worry about that extra padding conflicting with other SVGs since it would then be much larger than it is currently.

Re: SVG Rotation around Anchor Point

JamesIng — Tue, 17 Dec 2024 20:43:45 GMT

In this scenario you might want to consider using a CIM symbol instead where you can programmatically set the rotate as an arcade expression off a feature.

You can convert existing SVGs into CIM symbols using esri's handy dandy CIM Symbol builder:
https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/upload-symbols-from-svg-in-the-updated-cim-symbol-builder/

Then apply a primitive override based off what your trying to do for offset and rotation.

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html#constructors-summary