SVG Animation

1. A concise explanation of the problem you’re experiencing.

Is there anyway to output a SVG-based animation to the cesium map?

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer(“cesiumContainer”, {
imageryProvider: Cesium.createTileMapServiceImageryProvider({
url: Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII’)
shouldAnimate: true,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
requestRenderMode: true,
maximumRenderTimeChange: Infinity

var svg = “data:image/svg+xml,<svg class = “button” expanded = “true” height = “100px” width = “100px”><circle class = “innerCircle” cx = “50%” cy = “50%” r = “25%” fill = “none” stroke = “#000000” stroke-width = “5%”><animate attributeType=“SVG” attributeName=“r” begin=“0s” dur=“1.5s” repeatCount=“indefinite” from=“5%” to=“25%”/><animate attributeType=“CSS” attributeName=“stroke-width” begin=“0s” dur=“1.5s” repeatCount=“indefinite” from=“3%” to=“0%” /><animate attributeType=“CSS” attributeName=“opacity” begin=“0s” dur=“1.5s” repeatCount=“indefinite” from=“1” to=“0”/>”;

    position: Cesium.Cartesian3.fromDegrees(-75, 30),
    billboard: {
        pixelOffset: new Cesium.Cartesian2(-sym.markerAnchor.x, -sym.markerAnchor.y), // Symbol offset
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default
        verticalOrigin: Cesium.VerticalOrigin.TOP

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to add a little more flair to the cesium map

4. The Cesium version you’re using, your operating system and browser.

I think this has been requested frequently, it’s still an open issue:

But you can see at the bottom Matt does has a solution in a branch you could try out. I’ve gone ahead and bumped the issue so they’re aware it’s still something that’s requested.

Thank you, sir.


Has this issue been resolved now? I want to import the svg file with SMIL animation into cesium, but there is only one frame after I import it. In addition, there is a lottie (GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. scheme, which is a json file. Can this also be introduced into cesium?