SVG Animation

[Jody Robert Ford]

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\"/></circle></svg>";

    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-75, 30),
        billboard: {
            image:svg,
            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.

[Omar Shehata]

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

https://github.com/AnalyticalGraphicsInc/cesium/issues/2319

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. 

[Jody Robert Ford]

Thank you, sir.

Jody

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.