Merge pull request #1076 from ecomfe/fix/svg-color-compatibility

fix(svg): set `pointer-events` as `visible` when fill/stroke color `none` in SSR mode & fix invalid `transparent` color issue

src/svg/Painter.ts

@@ -142,6 +142,7 @@ class SVGPainter implements PainterBase {
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
         scope.emphasis = opts.emphasis;
+        scope.ssr = this._opts.ssr;
 
         const children: SVGVNode[] = [];
 

src/svg/core.ts

@@ -159,6 +159,8 @@ export interface BrushScope {
      * If compress the output string.
      */
     compress?: boolean
+
+    ssr?: boolean
 }
 
 export function createBrushScope(zrId: string): BrushScope {

src/svg/graphic.ts

@@ -63,13 +63,15 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
         else if (isFillStroke && isPattern(val)) {
             setPattern(el, attrs, key, scope);
         }
-        else if (isFillStroke && val === 'none') {
-            // When is none, it cannot be interacted when ssr
-            attrs[key] = 'transparent';
-        }
         else {
             attrs[key] = val;
         }
+        if (isFillStroke && scope.ssr && val === 'none') {
+            // When is none, it cannot be interacted when ssr
+            // Setting `pointer-events` as `visible` to make it responding
+            // See also https://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
+            attrs['pointer-events'] = 'visible';
+        }
     }, style, el, false);
 
     setShadow(el, attrs, scope);