SVG Rotation around Anchor Point

Question

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?

JamesIng · Answer

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

AddisonShaw · Answer

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.

JamesIng · Answer

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/