diff --git a/src/svg/helper/ShadowManager.ts b/src/svg/helper/ShadowManager.ts
index f836444fa..5e2d5da50 100644
--- 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
index 695f2bf9d..e70c3c1cb 100644
--- 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() {