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”/>”;
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.