From f942c482d8486aa44b1b871427e943815f233342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sat, 21 Mar 2020 00:15:49 +0100
Subject: [PATCH 1/3] Svg icon needs imgSize to display in ie11

---
 examples/icon-color.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/icon-color.js b/examples/icon-color.js
index e88e3d52b8..11b30dd50e 100644
--- a/examples/icon-color.js
+++ b/examples/icon-color.js
@@ -25,6 +25,7 @@ rome.setStyle(new Style({
   image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
+    imgSize: [20, 20],
     src: 'data/square.svg'
   })
 }));

From fbb0364ea518818e60619115b6a0177165c67f5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sat, 21 Mar 2020 00:16:46 +0100
Subject: [PATCH 2/3] Make Icon's color attribute work in ie11

---
 examples/data/square.svg  |  2 +-
 src/ol/style/IconImage.js | 30 +++++++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/examples/data/square.svg b/examples/data/square.svg
index 0b7a912a53..e7a5e249f3 100644
--- a/examples/data/square.svg
+++ b/examples/data/square.svg
@@ -2,6 +2,6 @@
 
 <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
   <g>
-    <rect width="20" height="20" style="fill:#fff" />
+    <rect width="20" height="20" style="fill:#fff; stroke-width:4px; stroke:#000" />
   </g>
 </svg>
diff --git a/src/ol/style/IconImage.js b/src/ol/style/IconImage.js
index d2361e5bb7..a9739a3ed6 100644
--- a/src/ol/style/IconImage.js
+++ b/src/ol/style/IconImage.js
@@ -85,15 +85,18 @@ class IconImage extends EventTarget {
 
   /**
    * @private
+   * @param {CanvasRenderingContext2D=} context A context with the image already drawn into.
    * @return {boolean} The image canvas is tainted.
    */
-  isTainted_() {
+  isTainted_(context) {
     if (this.tainted_ === undefined && this.imageState_ === ImageState.LOADED) {
-      this.tainted_ = false;
-      const context = createCanvasContext2D(1, 1);
-      try {
+      if (!context) {
+        context = createCanvasContext2D(1, 1);
         context.drawImage(this.image_, 0, 0);
+      }
+      try {
         context.getImageData(0, 0, 1, 1);
+        this.tainted_ = false;
       } catch (e) {
         this.tainted_ = true;
       }
@@ -203,7 +206,7 @@ class IconImage extends EventTarget {
    * @private
    */
   replaceColor_() {
-    if (!this.color_ || this.isTainted_()) {
+    if (!this.color_) {
       return;
     }
 
@@ -213,6 +216,23 @@ class IconImage extends EventTarget {
     const ctx = this.canvas_.getContext('2d');
     ctx.drawImage(this.image_, 0, 0);
 
+    if (this.isTainted_(ctx)) {
+      // Internet explorer 11 marks canvas as tainted if the drawn image is a svg.
+      // This makes the getImageData function throw a SecurityError.
+      // The same effect can be achieved with the globalCompositionOperation but
+      // Internet Explorer 11 does not properly support the multiply operation.
+      // So this is only used as a fallback. It is still better than having no icon
+      // at all.
+      const c = this.color_;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
+      ctx.fillRect(0, 0, this.image_.width, this.image_.height);
+
+      ctx.globalCompositeOperation = 'destination-in';
+      ctx.drawImage(this.image_, 0, 0);
+      return;
+    }
+
     const imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height);
     const data = imgData.data;
     const r = this.color_[0] / 255.0;

From 24f9e1c6ac1cc4acab976419c5fec4f16b2090a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sun, 22 Mar 2020 13:29:29 +0100
Subject: [PATCH 3/3] Update comment for the IconImage replaceColor_ method

---
 src/ol/style/IconImage.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ol/style/IconImage.js b/src/ol/style/IconImage.js
index a9739a3ed6..38ca4cda5c 100644
--- a/src/ol/style/IconImage.js
+++ b/src/ol/style/IconImage.js
@@ -217,10 +217,12 @@ class IconImage extends EventTarget {
     ctx.drawImage(this.image_, 0, 0);
 
     if (this.isTainted_(ctx)) {
-      // Internet explorer 11 marks canvas as tainted if the drawn image is a svg.
-      // This makes the getImageData function throw a SecurityError.
-      // The same effect can be achieved with the globalCompositionOperation but
-      // Internet Explorer 11 does not properly support the multiply operation.
+      // If reading from the canvas throws a SecurityError the same effect can be
+      // achieved with globalCompositeOperation.
+      // This could be used as the default, but it is not fully supported by all
+      // browsers. E. g. Internet Explorer 11 does not support the multiply
+      // operation and the resulting image shape will be completelly filled with
+      // the provided color.
       // So this is only used as a fallback. It is still better than having no icon
       // at all.
       const c = this.color_;