Merge pull request #8993 from CesiumGS/ios-workaround

Hannah · web-flow · commit ee6857f1ed64 · 2020-06-30T13:21:05.000-04:00
Avoid 'use' in SVG due to iOS 13.5.1 bug
diff --git a/CHANGES.md b/CHANGES.md
@@ -27,6 +27,7 @@
 - Fixed `scene.pickFromRay` intersection inaccuracies. [#8439](https://github.com/CesiumGS/cesium/issues/8439)
 - Fixed a bug where a null or undefined name property passed to the `Entity` constructor would throw an exception.[#8832](https://github.com/CesiumGS/cesium/pull/8832)
 - Fixed JSDoc and TypeScript type definitions for `ScreenSpaceEventHandler.getInputAction` which listed incorrect return type. [#9002](https://github.com/CesiumGS/cesium/pull/9002)
+- Fixed animation widget SVG icons not appearing in iOS 13.5.1. [#8993](https://github.com/CesiumGS/cesium/pull/8993)
 
 ### 1.70.1 - 2020-06-10
 
diff --git a/Source/Widgets/Animation/Animation.js b/Source/Widgets/Animation/Animation.js
@@ -29,6 +29,56 @@ function getElementColor(element) {
   );
 }
 
+var svgIconsById = {
+  animation_pathReset: {
+    tagName: "path",
+    transform: "translate(16,16) scale(0.85) translate(-16,-16)",
+    d:
+      "M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z",
+  },
+  animation_pathPause: {
+    tagName: "path",
+    transform: "translate(16,16) scale(0.85) translate(-16,-16)",
+    d: "M13,5.5,7.5,5.5,7.5,25.5,13,25.5zM24.5,5.5,19,5.5,19,25.5,24.5,25.5z",
+  },
+  animation_pathPlay: {
+    tagName: "path",
+    transform: "translate(16,16) scale(0.85) translate(-16,-16)",
+    d: "M6.684,25.682L24.316,15.5L6.684,5.318V25.682z",
+  },
+  animation_pathPlayReverse: {
+    tagName: "path",
+    transform: "translate(16,16) scale(-0.85,0.85) translate(-16,-16)",
+    d: "M6.684,25.682L24.316,15.5L6.684,5.318V25.682z",
+  },
+  animation_pathLoop: {
+    tagName: "path",
+    transform: "translate(16,16) scale(0.85) translate(-16,-16)",
+    d:
+      "M24.249,15.499c-0.009,4.832-3.918,8.741-8.75,8.75c-2.515,0-4.768-1.064-6.365-2.763l2.068-1.442l-7.901-3.703l0.744,8.694l2.193-1.529c2.244,2.594,5.562,4.242,9.26,4.242c6.767,0,12.249-5.482,12.249-12.249H24.249zM15.499,6.75c2.516,0,4.769,1.065,6.367,2.764l-2.068,1.443l7.901,3.701l-0.746-8.693l-2.192,1.529c-2.245-2.594-5.562-4.245-9.262-4.245C8.734,3.25,3.25,8.734,3.249,15.499H6.75C6.758,10.668,10.668,6.758,15.499,6.75z",
+  },
+  animation_pathClock: {
+    tagName: "path",
+    transform: "translate(16,16) scale(0.85) translate(-16,-15.5)",
+    d:
+      "M15.5,2.374C8.251,2.375,2.376,8.251,2.374,15.5C2.376,22.748,8.251,28.623,15.5,28.627c7.249-0.004,13.124-5.879,13.125-13.127C28.624,8.251,22.749,2.375,15.5,2.374zM15.5,25.623C9.909,25.615,5.385,21.09,5.375,15.5C5.385,9.909,9.909,5.384,15.5,5.374c5.59,0.01,10.115,4.535,10.124,10.125C25.615,21.09,21.091,25.615,15.5,25.623zM8.625,15.5c-0.001-0.552-0.448-0.999-1.001-1c-0.553,0-1,0.448-1,1c0,0.553,0.449,1,1,1C8.176,16.5,8.624,16.053,8.625,15.5zM8.179,18.572c-0.478,0.277-0.642,0.889-0.365,1.367c0.275,0.479,0.889,0.641,1.365,0.365c0.479-0.275,0.643-0.887,0.367-1.367C9.27,18.461,8.658,18.297,8.179,18.572zM9.18,10.696c-0.479-0.276-1.09-0.112-1.366,0.366s-0.111,1.09,0.365,1.366c0.479,0.276,1.09,0.113,1.367-0.366C9.821,11.584,9.657,10.973,9.18,10.696zM22.822,12.428c0.478-0.275,0.643-0.888,0.366-1.366c-0.275-0.478-0.89-0.642-1.366-0.366c-0.479,0.278-0.642,0.89-0.366,1.367C21.732,12.54,22.344,12.705,22.822,12.428zM12.062,21.455c-0.478-0.275-1.089-0.111-1.366,0.367c-0.275,0.479-0.111,1.09,0.366,1.365c0.478,0.277,1.091,0.111,1.365-0.365C12.704,22.344,12.54,21.732,12.062,21.455zM12.062,9.545c0.479-0.276,0.642-0.888,0.366-1.366c-0.276-0.478-0.888-0.642-1.366-0.366s-0.642,0.888-0.366,1.366C10.973,9.658,11.584,9.822,12.062,9.545zM22.823,18.572c-0.48-0.275-1.092-0.111-1.367,0.365c-0.275,0.479-0.112,1.092,0.367,1.367c0.477,0.275,1.089,0.113,1.365-0.365C23.464,19.461,23.3,18.848,22.823,18.572zM19.938,7.813c-0.477-0.276-1.091-0.111-1.365,0.366c-0.275,0.48-0.111,1.091,0.366,1.367s1.089,0.112,1.366-0.366C20.581,8.702,20.418,8.089,19.938,7.813zM23.378,14.5c-0.554,0.002-1.001,0.45-1.001,1c0.001,0.552,0.448,1,1.001,1c0.551,0,1-0.447,1-1C24.378,14.949,23.929,14.5,23.378,14.5zM15.501,6.624c-0.552,0-1,0.448-1,1l-0.466,7.343l-3.004,1.96c-0.478,0.277-0.642,0.889-0.365,1.365c0.275,0.479,0.889,0.643,1.365,0.367l3.305-1.676C15.39,16.99,15.444,17,15.501,17c0.828,0,1.5-0.671,1.5-1.5l-0.5-7.876C16.501,7.072,16.053,6.624,15.501,6.624zM15.501,22.377c-0.552,0-1,0.447-1,1s0.448,1,1,1s1-0.447,1-1S16.053,22.377,15.501,22.377zM18.939,21.455c-0.479,0.277-0.643,0.889-0.366,1.367c0.275,0.477,0.888,0.643,1.366,0.365c0.478-0.275,0.642-0.889,0.366-1.365C20.028,21.344,19.417,21.18,18.939,21.455z",
+  },
+  animation_pathWingButton: {
+    tagName: "path",
+    d:
+      "m 4.5,0.5 c -2.216,0 -4,1.784 -4,4 l 0,24 c 0,2.216 1.784,4 4,4 l 13.71875,0 C 22.478584,27.272785 27.273681,22.511272 32.5,18.25 l 0,-13.75 c 0,-2.216 -1.784,-4 -4,-4 l -24,0 z",
+  },
+  animation_pathPointer: {
+    tagName: "path",
+    d: "M-15,-65,-15,-55,15,-55,15,-65,0,-95z",
+  },
+  animation_pathSwooshFX: {
+    tagName: "path",
+    d:
+      "m 85,0 c 0,16.617 -4.813944,35.356 -13.131081,48.4508 h 6.099803 c 8.317138,-13.0948 13.13322,-28.5955 13.13322,-45.2124 0,-46.94483 -38.402714,-85.00262 -85.7743869,-85.00262 -1.0218522,0 -2.0373001,0.0241 -3.0506131,0.0589 45.958443,1.59437 82.723058,35.77285 82.723058,81.70532 z",
+  },
+};
+
 //Dynamically builds an SVG element from a JSON object.
 function svgFromObject(obj) {
   var ele = document.createElementNS(svgNS, obj.tagName);
@@ -86,6 +136,8 @@ function makeColorString(background, gradient) {
 }
 
 function rectButton(x, y, path) {
+  var iconInfo = svgIconsById[path];
+
   var button = {
     tagName: "g",
     class: "cesium-animation-rectButton",
@@ -108,9 +160,11 @@ function rectButton(x, y, path) {
         ry: 4,
       },
       {
-        tagName: "use",
         class: "cesium-animation-buttonPath",
-        "xlink:href": path,
+        id: path,
+        tagName: iconInfo.tagName,
+        transform: iconInfo.transform,
+        d: iconInfo.d,
       },
       {
         tagName: "title",
@@ -122,25 +176,32 @@ function rectButton(x, y, path) {
 }
 
 function wingButton(x, y, path) {
+  var buttonIconInfo = svgIconsById[path];
+  var wingIconInfo = svgIconsById["animation_pathWingButton"];
+
   var button = {
     tagName: "g",
     class: "cesium-animation-rectButton",
     transform: "translate(" + x + "," + y + ")",
     children: [
       {
-        tagName: "use",
         class: "cesium-animation-buttonGlow",
-        "xlink:href": "#animation_pathWingButton",
+        id: "animation_pathWingButton",
+        tagName: wingIconInfo.tagName,
+        d: wingIconInfo.d,
       },
       {
-        tagName: "use",
         class: "cesium-animation-buttonMain",
-        "xlink:href": "#animation_pathWingButton",
+        id: "animation_pathWingButton",
+        tagName: wingIconInfo.tagName,
+        d: wingIconInfo.d,
       },
       {
-        tagName: "use",
         class: "cesium-animation-buttonPath",
-        "xlink:href": path,
+        id: path,
+        tagName: buttonIconInfo.tagName,
+        transform: buttonIconInfo.transform,
+        d: buttonIconInfo.d,
       },
       {
         tagName: "title",
@@ -436,19 +497,19 @@ function Animation(container, viewModel) {
   this._topG = topG;
 
   this._realtimeSVG = new SvgButton(
-    wingButton(3, 4, "#animation_pathClock"),
+    wingButton(3, 4, "animation_pathClock"),
     viewModel.playRealtimeViewModel
   );
   this._playReverseSVG = new SvgButton(
-    rectButton(44, 99, "#animation_pathPlayReverse"),
+    rectButton(44, 99, "animation_pathPlayReverse"),
     viewModel.playReverseViewModel
   );
   this._playForwardSVG = new SvgButton(
-    rectButton(124, 99, "#animation_pathPlay"),
+    rectButton(124, 99, "animation_pathPlay"),
     viewModel.playForwardViewModel
   );
   this._pauseSVG = new SvgButton(
-    rectButton(84, 99, "#animation_pathPause"),
+    rectButton(84, 99, "animation_pathPause"),
     viewModel.pauseViewModel
   );
 
@@ -467,19 +528,24 @@ function Animation(container, viewModel) {
   });
   this._shuttleRingBackPanel = shuttleRingBackPanel;
 
+  var swooshIconInfo = svgIconsById["animation_pathSwooshFX"];
+  var shuttleRingPointerIconInfo = svgIconsById["animation_pathPointer"];
+
   var shuttleRingSwooshG = svgFromObject({
     tagName: "g",
     class: "cesium-animation-shuttleRingSwoosh",
     children: [
       {
-        tagName: "use",
+        tagName: swooshIconInfo.tagName,
         transform: "translate(100,97) scale(-1,1)",
-        "xlink:href": "#animation_pathSwooshFX",
+        id: "animation_pathSwooshFX",
+        d: swooshIconInfo.d,
       },
       {
-        tagName: "use",
+        tagName: swooshIconInfo.tagName,
         transform: "translate(100,97)",
-        "xlink:href": "#animation_pathSwooshFX",
+        id: "animation_pathSwooshFX",
+        d: swooshIconInfo.d,
       },
       {
         tagName: "line",
@@ -493,9 +559,10 @@ function Animation(container, viewModel) {
   this._shuttleRingSwooshG = shuttleRingSwooshG;
 
   this._shuttleRingPointer = svgFromObject({
-    tagName: "use",
     class: "cesium-animation-shuttleRingPointer",
-    "xlink:href": "#animation_pathPointer",
+    id: "animation_pathPointer",
+    tagName: shuttleRingPointerIconInfo.tagName,
+    d: shuttleRingPointerIconInfo.d,
   });
 
   var knobG = svgFromObject({
@@ -1164,63 +1231,6 @@ Animation.prototype.applyThemeChanges = function () {
           },
         ],
       },
-      {
-        id: "animation_pathReset",
-        tagName: "path",
-        transform: "translate(16,16) scale(0.85) translate(-16,-16)",
-        d:
-          "M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z",
-      },
-      {
-        id: "animation_pathPause",
-        tagName: "path",
-        transform: "translate(16,16) scale(0.85) translate(-16,-16)",
-        d:
-          "M13,5.5,7.5,5.5,7.5,25.5,13,25.5zM24.5,5.5,19,5.5,19,25.5,24.5,25.5z",
-      },
-      {
-        id: "animation_pathPlay",
-        tagName: "path",
-        transform: "translate(16,16) scale(0.85) translate(-16,-16)",
-        d: "M6.684,25.682L24.316,15.5L6.684,5.318V25.682z",
-      },
-      {
-        id: "animation_pathPlayReverse",
-        tagName: "path",
-        transform: "translate(16,16) scale(-0.85,0.85) translate(-16,-16)",
-        d: "M6.684,25.682L24.316,15.5L6.684,5.318V25.682z",
-      },
-      {
-        id: "animation_pathLoop",
-        tagName: "path",
-        transform: "translate(16,16) scale(0.85) translate(-16,-16)",
-        d:
-          "M24.249,15.499c-0.009,4.832-3.918,8.741-8.75,8.75c-2.515,0-4.768-1.064-6.365-2.763l2.068-1.442l-7.901-3.703l0.744,8.694l2.193-1.529c2.244,2.594,5.562,4.242,9.26,4.242c6.767,0,12.249-5.482,12.249-12.249H24.249zM15.499,6.75c2.516,0,4.769,1.065,6.367,2.764l-2.068,1.443l7.901,3.701l-0.746-8.693l-2.192,1.529c-2.245-2.594-5.562-4.245-9.262-4.245C8.734,3.25,3.25,8.734,3.249,15.499H6.75C6.758,10.668,10.668,6.758,15.499,6.75z",
-      },
-      {
-        id: "animation_pathClock",
-        tagName: "path",
-        transform: "translate(16,16) scale(0.85) translate(-16,-15.5)",
-        d:
-          "M15.5,2.374C8.251,2.375,2.376,8.251,2.374,15.5C2.376,22.748,8.251,28.623,15.5,28.627c7.249-0.004,13.124-5.879,13.125-13.127C28.624,8.251,22.749,2.375,15.5,2.374zM15.5,25.623C9.909,25.615,5.385,21.09,5.375,15.5C5.385,9.909,9.909,5.384,15.5,5.374c5.59,0.01,10.115,4.535,10.124,10.125C25.615,21.09,21.091,25.615,15.5,25.623zM8.625,15.5c-0.001-0.552-0.448-0.999-1.001-1c-0.553,0-1,0.448-1,1c0,0.553,0.449,1,1,1C8.176,16.5,8.624,16.053,8.625,15.5zM8.179,18.572c-0.478,0.277-0.642,0.889-0.365,1.367c0.275,0.479,0.889,0.641,1.365,0.365c0.479-0.275,0.643-0.887,0.367-1.367C9.27,18.461,8.658,18.297,8.179,18.572zM9.18,10.696c-0.479-0.276-1.09-0.112-1.366,0.366s-0.111,1.09,0.365,1.366c0.479,0.276,1.09,0.113,1.367-0.366C9.821,11.584,9.657,10.973,9.18,10.696zM22.822,12.428c0.478-0.275,0.643-0.888,0.366-1.366c-0.275-0.478-0.89-0.642-1.366-0.366c-0.479,0.278-0.642,0.89-0.366,1.367C21.732,12.54,22.344,12.705,22.822,12.428zM12.062,21.455c-0.478-0.275-1.089-0.111-1.366,0.367c-0.275,0.479-0.111,1.09,0.366,1.365c0.478,0.277,1.091,0.111,1.365-0.365C12.704,22.344,12.54,21.732,12.062,21.455zM12.062,9.545c0.479-0.276,0.642-0.888,0.366-1.366c-0.276-0.478-0.888-0.642-1.366-0.366s-0.642,0.888-0.366,1.366C10.973,9.658,11.584,9.822,12.062,9.545zM22.823,18.572c-0.48-0.275-1.092-0.111-1.367,0.365c-0.275,0.479-0.112,1.092,0.367,1.367c0.477,0.275,1.089,0.113,1.365-0.365C23.464,19.461,23.3,18.848,22.823,18.572zM19.938,7.813c-0.477-0.276-1.091-0.111-1.365,0.366c-0.275,0.48-0.111,1.091,0.366,1.367s1.089,0.112,1.366-0.366C20.581,8.702,20.418,8.089,19.938,7.813zM23.378,14.5c-0.554,0.002-1.001,0.45-1.001,1c0.001,0.552,0.448,1,1.001,1c0.551,0,1-0.447,1-1C24.378,14.949,23.929,14.5,23.378,14.5zM15.501,6.624c-0.552,0-1,0.448-1,1l-0.466,7.343l-3.004,1.96c-0.478,0.277-0.642,0.889-0.365,1.365c0.275,0.479,0.889,0.643,1.365,0.367l3.305-1.676C15.39,16.99,15.444,17,15.501,17c0.828,0,1.5-0.671,1.5-1.5l-0.5-7.876C16.501,7.072,16.053,6.624,15.501,6.624zM15.501,22.377c-0.552,0-1,0.447-1,1s0.448,1,1,1s1-0.447,1-1S16.053,22.377,15.501,22.377zM18.939,21.455c-0.479,0.277-0.643,0.889-0.366,1.367c0.275,0.477,0.888,0.643,1.366,0.365c0.478-0.275,0.642-0.889,0.366-1.365C20.028,21.344,19.417,21.18,18.939,21.455z",
-      },
-      {
-        id: "animation_pathWingButton",
-        tagName: "path",
-        d:
-          "m 4.5,0.5 c -2.216,0 -4,1.784 -4,4 l 0,24 c 0,2.216 1.784,4 4,4 l 13.71875,0 C 22.478584,27.272785 27.273681,22.511272 32.5,18.25 l 0,-13.75 c 0,-2.216 -1.784,-4 -4,-4 l -24,0 z",
-      },
-      {
-        id: "animation_pathPointer",
-        tagName: "path",
-        d: "M-15,-65,-15,-55,15,-55,15,-65,0,-95z",
-      },
-      {
-        id: "animation_pathSwooshFX",
-        tagName: "path",
-        d:
-          "m 85,0 c 0,16.617 -4.813944,35.356 -13.131081,48.4508 h 6.099803 c 8.317138,-13.0948 13.13322,-28.5955 13.13322,-45.2124 0,-46.94483 -38.402714,-85.00262 -85.7743869,-85.00262 -1.0218522,0 -2.0373001,0.0241 -3.0506131,0.0589 45.958443,1.59437 82.723058,35.77285 82.723058,81.70532 z",
-      },
     ],
   });
 
