fix(svg): svg shadow to solve apache/echarts#12614

ecomfe · Sep 10, 2021 · 0cc7fae · 0cc7fae
1 parent f45c4e4
commit 0cc7fae
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/src/core/event.ts b/src/core/event.ts
@@ -67,13 +67,16 @@ export function clientToLocal(
     // <https://bugs.jquery.com/ticket/8523#comment:14>
     // BTW3, In ff, offsetX/offsetY is always 0.
     else if (env.browser.firefox
+        // use offsetX/offsetY for Firefox >= 39
+        // PENDING: consider Firefox for Android and Firefox OS? >= 43
+        && env.browser.version < '39'
         && (e as FirefoxMouseEvent).layerX != null
         && (e as FirefoxMouseEvent).layerX !== (e as MouseEvent).offsetX
     ) {
         out.zrX = (e as FirefoxMouseEvent).layerX;
         out.zrY = (e as FirefoxMouseEvent).layerY;
     }
-    // For IE6+, chrome, safari, opera. (When will ff support offsetX?)
+    // For IE6+, chrome, safari, opera, firefox >= 39
     else if ((e as MouseEvent).offsetX != null) {
         out.zrX = (e as MouseEvent).offsetX;
         out.zrY = (e as MouseEvent).offsetY;

diff --git a/src/svg/helper/ShadowManager.ts b/src/svg/helper/ShadowManager.ts
@@ -36,6 +36,7 @@ export default class ShadowManager extends Definable {
         if (!shadowDom) {
             shadowDom = this.createElement('filter') as SVGFilterElement;
             shadowDom.setAttribute('id', 'zr' + this._zrId + '-shadow-' + this.nextId++);
+            shadowDom.setAttribute('filterUnits', 'userSpaceOnUse');
             const domChild = this.createElement('feDropShadow');
             shadowDom.appendChild(domChild);
             this.addDom(shadowDom);
@@ -73,7 +74,7 @@ export default class ShadowManager extends Definable {
     remove(svgElement: SVGElement, displayable: Displayable) {
         if ((displayable as DisplayableExtended)._shadowDom != null) {
             (displayable as DisplayableExtended)._shadowDom = null;
-            svgElement.style.filter = '';
+            svgElement.removeAttribute('filter');
         }
     }
 
@@ -124,7 +125,7 @@ export default class ShadowManager extends Definable {
         (displayable as DisplayableExtended)._shadowDom = shadowDom;
 
         const id = shadowDom.getAttribute('id');
-        svgElement.style.filter = 'url(#' + id + ')';
+        svgElement.setAttribute('filter', 'url(#' + id + ')');
     }
 
     removeUnused() {

diff --git a/test/svg-shadow.html b/test/svg-shadow.html
@@ -8,9 +8,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
+    <h4>Canvas</h4>
     <div id="main-canvas" style="width:1000px;height:200px;"></div>
+    <h4>SVG</h4>
     <div id="main-svg" style="width:1000px;height:200px;"></div>
-    <div style="position: absolute; left: 10px; top: 10px">
+    <div style="position: absolute; right: 10px; top: 10px">
         <button onclick="toggleShadow()">Toggle Shadow</button>
     </div>
     <script type="text/javascript">
@@ -46,6 +48,26 @@
             rects.push(rect);
             (k ? zrSvg : zrCanvas).add(rect);
         }
+
+        const line = new zrender.Line({
+            shape: {
+                x1: 60,
+                y1: 160,
+                x2: 310,
+                y2: 160
+            },
+            style: {
+                stroke: 'red',
+                lineWidth: 3,
+                shadowBlur: 10,
+                shadowColor: 'blue',
+                shadowOffsetX: 10,
+                shadowOffsetY: 10
+            }
+        });
+        line.__shadowBlur = 10;
+        rects.push(line);
+        (k ? zrSvg : zrCanvas).add(line);
     }
 
     function toggleShadow() {