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

ecomfe · Sep 10, 2021 · e559d72 · e559d72
1 parent f1f0381
commit e559d72
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
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);

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() {