zrender-nightly 5.4.4-dev.20231115 → 5.4.4-dev.20231116

package/lib/Element.d.ts

@@ -166,6 +166,7 @@ declare class Element<Props extends ElementProps = ElementProps> {
     clearStates(noAnimation?: boolean): void;
     useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean, forceUseHoverLayer?: boolean): ElementState;
     useStates(states: string[], noAnimation?: boolean, forceUseHoverLayer?: boolean): void;
+    isSilent(): boolean;
     private _updateAnimationTargets;
     removeState(state: string): void;
     replaceState(oldState: string, newState: string, forceAdd: boolean): void;

package/lib/Element.js

@@ -400,6 +400,18 @@ var Element = (function () {
             }
         }
     };
+    Element.prototype.isSilent = function () {
+        var isSilent = this.silent;
+        var ancestor = this.parent;
+        while (!isSilent && ancestor) {
+            if (ancestor.silent) {
+                isSilent = true;
+                break;
+            }
+            ancestor = ancestor.parent;
+        }
+        return isSilent;
+    };
     Element.prototype._updateAnimationTargets = function () {
         for (var i = 0; i < this.animators.length; i++) {
             var animator = this.animators[i];

package/lib/svg/Painter.d.ts

@@ -39,9 +39,11 @@ declare class SVGPainter implements PainterBase {
         willUpdate?: boolean;
         compress?: boolean;
         useViewBox?: boolean;
+        emphasis?: boolean;
     }): SVGVNode;
     renderToString(opts?: {
         cssAnimation?: boolean;
+        cssEmphasis?: boolean;
         useViewBox?: boolean;
     }): string;
     setBackgroundColor(backgroundColor: SVGPainterBackgroundColor): void;

package/lib/svg/Painter.js

@@ -65,6 +65,7 @@ var SVGPainter = (function () {
         scope.animation = opts.animation;
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
+        scope.emphasis = opts.emphasis;
         var children = [];
         var bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
         bgVNode && children.push(bgVNode);
@@ -89,6 +90,7 @@ var SVGPainter = (function () {
         opts = opts || {};
         return vNodeToString(this.renderToVNode({
             animation: retrieve2(opts.cssAnimation, true),
+            emphasis: retrieve2(opts.cssEmphasis, true),
             willUpdate: false,
             compress: true,
             useViewBox: retrieve2(opts.useViewBox, true)

package/lib/svg/core.d.ts

@@ -4,6 +4,7 @@ export declare const SVGNS = "http://www.w3.org/2000/svg";
 export declare const XLINKNS = "http://www.w3.org/1999/xlink";
 export declare const XMLNS = "http://www.w3.org/2000/xmlns/";
 export declare const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
+export declare const META_DATA_PREFIX = "ecmeta_";
 export declare function createElement(name: string): SVGElement;
 export declare type SVGVNodeAttrs = Record<string, string | number | undefined | boolean>;
 export interface SVGVNode {
@@ -30,13 +31,14 @@ export interface BrushScope {
     defs: Record<string, SVGVNode>;
     cssNodes: Record<string, CSSSelectorVNode>;
     cssAnims: Record<string, Record<string, Record<string, string>>>;
-    cssClassIdx: number;
+    cssStyleCache: Record<string, string>;
     cssAnimIdx: number;
     shadowIdx: number;
     gradientIdx: number;
     patternIdx: number;
     clipPathIdx: number;
     animation?: boolean;
+    emphasis?: boolean;
     willUpdate?: boolean;
     compress?: boolean;
 }

package/lib/svg/core.js

@@ -4,6 +4,7 @@ export var SVGNS = 'http://www.w3.org/2000/svg';
 export var XLINKNS = 'http://www.w3.org/1999/xlink';
 export var XMLNS = 'http://www.w3.org/2000/xmlns/';
 export var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+export var META_DATA_PREFIX = 'ecmeta_';
 export function createElement(name) {
     return document.createElementNS(SVGNS, name);
 }
@@ -85,7 +86,7 @@ export function createBrushScope(zrId) {
         defs: {},
         cssNodes: {},
         cssAnims: {},
-        cssClassIdx: 0,
+        cssStyleCache: {},
         cssAnimIdx: 0,
         shadowIdx: 0,
         gradientIdx: 0,

package/lib/svg/cssAnimation.js

@@ -6,6 +6,7 @@ import { getPathPrecision, getSRTTransformString } from './helper.js';
 import { each, extend, filter, isNumber, isString, keys } from '../core/util.js';
 import CompoundPath from '../graphic/CompoundPath.js';
 import { createCubicEasingFunc } from '../animation/cubicEasing.js';
+import { getClassId } from './cssClassId.js';
 export var EASING_MAP = {
     cubicIn: '0.32,0,0.67,0',
     cubicOut: '0.33,1,0.68,1',
@@ -266,7 +267,7 @@ export function createCSSAnimation(el, attrs, scope, onlyShape) {
         }
     }
     if (cssAnimations.length) {
-        var className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+        var className = scope.zrId + '-cls-' + getClassId();
         scope.cssNodes['.' + className] = {
             animation: cssAnimations.join(',')
         };

package/lib/svg/cssClassId.d.ts

@@ -0,0 +1 @@
+export declare function getClassId(): number;

package/lib/svg/cssClassId.js

@@ -0,0 +1,4 @@
+var cssClassIdx = 0;
+export function getClassId() {
+    return cssClassIdx++;
+}

package/lib/svg/cssEmphasis.d.ts

@@ -0,0 +1,3 @@
+import Displayable from '../graphic/Displayable';
+import { BrushScope, SVGVNodeAttrs } from './core';
+export declare function createCSSEmphasis(el: Displayable, attrs: SVGVNodeAttrs, scope: BrushScope): void;

package/lib/svg/cssEmphasis.js

@@ -0,0 +1,60 @@
+import { liftColor } from '../tool/color.js';
+import { getClassId } from './cssClassId.js';
+export function createCSSEmphasis(el, attrs, scope) {
+    if (!el.ignore) {
+        if (el.isSilent()) {
+            var style = {
+                'pointer-events': 'none'
+            };
+            setClassAttribute(style, attrs, scope, true);
+        }
+        else {
+            var emphasisStyle = el.states.emphasis && el.states.emphasis.style
+                ? el.states.emphasis.style
+                : {};
+            var fill = emphasisStyle.fill;
+            if (!fill) {
+                var normalFill = el.style && el.style.fill;
+                var selectFill = el.states.select
+                    && el.states.select.style
+                    && el.states.select.style.fill;
+                var fromFill = el.currentStates.indexOf('select') >= 0
+                    ? (selectFill || normalFill)
+                    : normalFill;
+                if (fromFill) {
+                    fill = liftColor(fromFill);
+                }
+            }
+            var lineWidth = emphasisStyle.lineWidth;
+            if (lineWidth) {
+                var scaleX = (!emphasisStyle.strokeNoScale && el.transform)
+                    ? el.transform[0]
+                    : 1;
+                lineWidth = lineWidth / scaleX;
+            }
+            var style = {
+                cursor: 'pointer'
+            };
+            if (fill) {
+                style.fill = fill;
+            }
+            if (emphasisStyle.stroke) {
+                style.stroke = emphasisStyle.stroke;
+            }
+            if (lineWidth) {
+                style['stroke-width'] = lineWidth;
+            }
+            setClassAttribute(style, attrs, scope, true);
+        }
+    }
+}
+function setClassAttribute(style, attrs, scope, withHover) {
+    var styleKey = JSON.stringify(style);
+    var className = scope.cssStyleCache[styleKey];
+    if (!className) {
+        className = scope.zrId + '-cls-' + getClassId();
+        scope.cssStyleCache[styleKey] = className;
+        scope.cssNodes['.' + className + (withHover ? ':hover' : '')] = style;
+    }
+    attrs["class"] = attrs["class"] ? (attrs["class"] + ' ' + className) : className;
+}

package/lib/svg/graphic.js

@@ -5,12 +5,14 @@ import { getLineHeight } from '../contain/text.js';
 import TSpan from '../graphic/TSpan.js';
 import SVGPathRebuilder from './SVGPathRebuilder.js';
 import mapStyleToAttrs from './mapStyleToAttrs.js';
-import { createVNode, vNodeToString } from './core.js';
+import { createVNode, vNodeToString, META_DATA_PREFIX } from './core.js';
 import { assert, clone, isFunction, isString, logError, map, retrieve2 } from '../core/util.js';
 import { createOrUpdateImage } from '../graphic/helper/image.js';
 import { createCSSAnimation } from './cssAnimation.js';
 import { hasSeparateFont, parseFontSize } from '../graphic/Text.js';
 import { DEFAULT_FONT, DEFAULT_FONT_FAMILY } from '../core/platform.js';
+import { createCSSEmphasis } from './cssEmphasis.js';
+import { getElementSSRData } from '../zrender.js';
 var round = Math.round;
 function isImageLike(val) {
     return val && isString(val.src);
@@ -27,12 +29,27 @@ function setStyleAttrs(attrs, style, el, scope) {
         else if (isFillStroke && isPattern(val)) {
             setPattern(el, attrs, key, scope);
         }
+        else if (isFillStroke && val === 'none') {
+            attrs[key] = 'transparent';
+        }
         else {
             attrs[key] = val;
         }
     }, style, el, false);
     setShadow(el, attrs, scope);
 }
+function setMetaData(attrs, el) {
+    var metaData = getElementSSRData(el);
+    if (metaData) {
+        metaData.each(function (val, key) {
+            attrs[(META_DATA_PREFIX + key).toLowerCase()]
+                = val + '';
+        });
+        if (el.isSilent()) {
+            attrs[META_DATA_PREFIX + 'silent'] = 'true';
+        }
+    }
+}
 function noRotateScale(m) {
     return isAroundZero(m[0] - 1)
         && isAroundZero(m[1])
@@ -137,7 +154,9 @@ export function brushSVGPath(el, scope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
     scope.animation && createCSSAnimation(el, attrs, scope);
+    scope.emphasis && createCSSEmphasis(el, attrs, scope);
     return createVNode(svgElType, el.id + '', attrs);
 }
 export function brushSVGImage(el, scope) {
@@ -171,6 +190,7 @@ export function brushSVGImage(el, scope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
     scope.animation && createCSSAnimation(el, attrs, scope);
     return createVNode('image', el.id + '', attrs);
 }
@@ -223,6 +243,7 @@ export function brushSVGTSpan(el, scope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
     scope.animation && createCSSAnimation(el, attrs, scope);
     return createVNode('text', el.id + '', attrs, undefined, text);
 }

package/lib/tool/color.d.ts

@@ -1,3 +1,4 @@
+import { GradientObject } from '../graphic/Gradient';
 export declare function parse(colorStr: string, rgbaArr?: number[]): number[];
 export declare function lift(color: string, level: number): string;
 export declare function toHex(color: string): string;
@@ -17,4 +18,6 @@ export declare function modifyAlpha(color: string, alpha?: number): string;
 export declare function stringify(arrColor: number[], type: string): string;
 export declare function lum(color: string, backgroundLum: number): number;
 export declare function random(): string;
+export declare function liftColor(color: GradientObject): GradientObject;
+export declare function liftColor(color: string): string;
 export {};

package/lib/tool/color.js

@@ -1,4 +1,5 @@
 import LRU from '../core/LRU.js';
+import { extend, isGradientObject, isString, map } from '../core/util.js';
 var kCSSColorTable = {
     'transparent': [0, 0, 0, 0], 'aliceblue': [240, 248, 255, 1],
     'antiquewhite': [250, 235, 215, 1], 'aqua': [0, 255, 255, 1],
@@ -406,3 +407,23 @@ export function random() {
         Math.round(Math.random() * 255)
     ], 'rgb');
 }
+var liftedColorCache = new LRU(100);
+export function liftColor(color) {
+    if (isString(color)) {
+        var liftedColor = liftedColorCache.get(color);
+        if (!liftedColor) {
+            liftedColor = lift(color, -0.1);
+            liftedColorCache.put(color, liftedColor);
+        }
+        return liftedColor;
+    }
+    else if (isGradientObject(color)) {
+        var ret = extend({}, color);
+        ret.colorStops = map(color.colorStops, function (stop) { return ({
+            offset: stop.offset,
+            color: lift(stop.color, -0.1)
+        }); });
+        return ret;
+    }
+    return color;
+}

package/lib/zrender.d.ts

@@ -7,6 +7,7 @@
 * LICENSE
 * https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
 */
+import * as zrUtil from './core/util';
 import Handler from './Handler';
 import Storage from './Storage';
 import { PainterBase } from './PainterBase';
@@ -84,7 +85,11 @@ export declare function dispose(zr: ZRender): void;
 export declare function disposeAll(): void;
 export declare function getInstance(id: number): ZRender;
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.4.4-dev.20231115";
+export declare type ElementSSRData = zrUtil.HashMap<unknown>;
+export declare type ElementSSRDataGetter<T> = (el: Element) => zrUtil.HashMap<T>;
+export declare function getElementSSRData(el: Element): ElementSSRData;
+export declare function registerSSRDataGetter<T>(getter: ElementSSRDataGetter<T>): void;
+export declare const version = "5.4.4-dev.20231116";
 export interface ZRenderType extends ZRender {
 }
 export {};

package/lib/zrender.js

@@ -261,5 +261,16 @@ export function getInstance(id) {
 export function registerPainter(name, Ctor) {
     painterCtors[name] = Ctor;
 }
-export var version = '5.4.4-dev.20231115';
+var ssrDataGetter = function (el) {
+    return null;
+};
+export function getElementSSRData(el) {
+    if (typeof ssrDataGetter === 'function') {
+        return ssrDataGetter(el);
+    }
+}
+export function registerSSRDataGetter(getter) {
+    ssrDataGetter = getter;
+}
+export var version = '5.4.4-dev.20231116';
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zrender-nightly",
-  "version": "5.4.4-dev.20231115",
+  "version": "5.4.4-dev.20231116",
   "description": "A lightweight graphic library providing 2d draw for Apache ECharts",
   "keywords": [
     "canvas",

package/src/Element.ts

@@ -1017,6 +1017,22 @@ class Element<Props extends ElementProps = ElementProps> {
         }
     }
 
+    /**
+     * Return if el.silent or any ancestor element has silent true.
+     */
+    isSilent() {
+        let isSilent = this.silent;
+        let ancestor = this.parent;
+        while (!isSilent && ancestor) {
+            if (ancestor.silent) {
+                isSilent = true;
+                break;
+            }
+            ancestor = ancestor.parent;
+        }
+        return isSilent;
+    }
+
     /**
      * Update animation targets when reference is changed.
      */

package/src/svg/Painter.ts

@@ -124,10 +124,11 @@ class SVGPainter implements PainterBase {
     }
 
     renderToVNode(opts?: {
-        animation?: boolean
-        willUpdate?: boolean
+        animation?: boolean,
+        willUpdate?: boolean,
         compress?: boolean,
-        useViewBox?: boolean
+        useViewBox?: boolean,
+        emphasis?: boolean
     }) {
 
         opts = opts || {};
@@ -140,6 +141,7 @@ class SVGPainter implements PainterBase {
         scope.animation = opts.animation;
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
+        scope.emphasis = opts.emphasis;
 
         const children: SVGVNode[] = [];
 
@@ -173,7 +175,12 @@ class SVGPainter implements PainterBase {
          * If add css animation.
          * @default true
          */
-        cssAnimation?: boolean
+        cssAnimation?: boolean,
+        /**
+         * If add css emphasis.
+         * @default true
+         */
+        cssEmphasis?: boolean,
         /**
          * If use viewBox
          * @default true
@@ -183,6 +190,7 @@ class SVGPainter implements PainterBase {
         opts = opts || {};
         return vNodeToString(this.renderToVNode({
             animation: retrieve2(opts.cssAnimation, true),
+            emphasis: retrieve2(opts.cssEmphasis, true),
             willUpdate: false,
             compress: true,
             useViewBox: retrieve2(opts.useViewBox, true)

package/src/svg/core.ts

@@ -8,6 +8,7 @@ export const SVGNS = 'http://www.w3.org/2000/svg';
 export const XLINKNS = 'http://www.w3.org/1999/xlink';
 export const XMLNS = 'http://www.w3.org/2000/xmlns/';
 export const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+export const META_DATA_PREFIX = 'ecmeta_';
 
 export function createElement(name: string) {
     return document.createElementNS(SVGNS, name);
@@ -128,8 +129,11 @@ export interface BrushScope {
 
     cssNodes: Record<string, CSSSelectorVNode>
     cssAnims: Record<string, Record<string, Record<string, string>>>
+    /**
+     * Cache for css style string, mapping from style string to class name.
+     */
+    cssStyleCache: Record<string, string>
 
-    cssClassIdx: number
     cssAnimIdx: number
 
     shadowIdx: number
@@ -141,6 +145,10 @@ export interface BrushScope {
      * If create animates nodes.
      */
     animation?: boolean,
+    /**
+     * If create emphasis styles.
+     */
+    emphasis?: boolean,
 
     /**
      * If will update. Some optimization for string generation can't be applied.
@@ -164,8 +172,8 @@ export function createBrushScope(zrId: string): BrushScope {
 
         cssNodes: {},
         cssAnims: {},
+        cssStyleCache: {},
 
-        cssClassIdx: 0,
         cssAnimIdx: 0,
 
         shadowIdx: 0,

package/src/svg/cssAnimation.ts

@@ -10,6 +10,7 @@ import Animator from '../animation/Animator';
 import CompoundPath from '../graphic/CompoundPath';
 import { AnimationEasing } from '../animation/easing';
 import { createCubicEasingFunc } from '../animation/cubicEasing';
+import { getClassId } from './cssClassId';
 
 export const EASING_MAP: Record<string, string> = {
     // From https://easings.net/
@@ -355,7 +356,7 @@ export function createCSSAnimation(
     }
 
     if (cssAnimations.length) {
-        const className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+        const className = scope.zrId + '-cls-' + getClassId();
         scope.cssNodes['.' + className] = {
             animation: cssAnimations.join(',')
         };

package/src/svg/cssClassId.ts

@@ -0,0 +1,5 @@
+let cssClassIdx = 0;
+
+export function getClassId() {
+    return cssClassIdx++;
+}

package/src/svg/cssEmphasis.ts

@@ -0,0 +1,73 @@
+import Displayable from '../graphic/Displayable';
+import { liftColor } from '../tool/color';
+import { BrushScope, SVGVNodeAttrs } from './core';
+import { getClassId } from './cssClassId';
+
+export function createCSSEmphasis(
+    el: Displayable,
+    attrs: SVGVNodeAttrs,
+    scope: BrushScope
+) {
+    if (!el.ignore) {
+        if (el.isSilent()) {
+            // If el is silent, it can not be hovered nor selected.
+            // So set pointer-events to pass through.
+            const style = {
+                'pointer-events': 'none'
+            };
+            setClassAttribute(style, attrs, scope, true);
+        }
+        else {
+            const emphasisStyle = el.states.emphasis && el.states.emphasis.style
+                ? el.states.emphasis.style
+                : {};
+            let fill = emphasisStyle.fill;
+            if (!fill) {
+                // No empahsis fill, lift color
+                const normalFill = el.style && el.style.fill;
+                const selectFill = el.states.select
+                    && el.states.select.style
+                    && el.states.select.style.fill;
+                const fromFill = el.currentStates.indexOf('select') >= 0
+                    ? (selectFill || normalFill)
+                    : normalFill;
+                if (fromFill) {
+                    fill = liftColor(fromFill);
+                }
+            }
+            let lineWidth = emphasisStyle.lineWidth;
+            if (lineWidth) {
+                // Symbols use transform to set size, so lineWidth
+                // should be divided by scaleX
+                const scaleX = (!emphasisStyle.strokeNoScale && el.transform)
+                    ? el.transform[0]
+                    : 1;
+                lineWidth = lineWidth / scaleX;
+            }
+            const style = {
+                cursor: 'pointer', // TODO: Should this be customized?
+            } as any;
+            if (fill) {
+                style.fill = fill;
+            }
+            if (emphasisStyle.stroke) {
+                style.stroke = emphasisStyle.stroke;
+            }
+            if (lineWidth) {
+                style['stroke-width'] = lineWidth;
+            }
+            setClassAttribute(style, attrs, scope, true);
+        }
+    }
+}
+
+function setClassAttribute(style: object, attrs: SVGVNodeAttrs, scope: BrushScope, withHover: boolean) {
+    const styleKey = JSON.stringify(style);
+    let className = scope.cssStyleCache[styleKey];
+    if (!className) {
+        className = scope.zrId + '-cls-' + getClassId();
+        scope.cssStyleCache[styleKey] = className;
+        scope.cssNodes['.' + className + (withHover ? ':hover' : '')] = style as any;
+    }
+    attrs.class = attrs.class ? (attrs.class + ' ' + className) : className;
+}

package/src/svg/graphic.ts

@@ -26,7 +26,7 @@ import { getLineHeight } from '../contain/text';
 import TSpan, { TSpanStyleProps } from '../graphic/TSpan';
 import SVGPathRebuilder from './SVGPathRebuilder';
 import mapStyleToAttrs from './mapStyleToAttrs';
-import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope } from './core';
+import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope, META_DATA_PREFIX } from './core';
 import { MatrixArray } from '../core/matrix';
 import Displayable from '../graphic/Displayable';
 import { assert, clone, isFunction, isString, logError, map, retrieve2 } from '../core/util';
@@ -39,6 +39,8 @@ import { ImageLike } from '../core/types';
 import { createCSSAnimation } from './cssAnimation';
 import { hasSeparateFont, parseFontSize } from '../graphic/Text';
 import { DEFAULT_FONT, DEFAULT_FONT_FAMILY } from '../core/platform';
+import { createCSSEmphasis } from './cssEmphasis';
+import { getElementSSRData } from '../zrender';
 
 const round = Math.round;
 
@@ -61,6 +63,10 @@ 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;
         }
@@ -69,6 +75,19 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
     setShadow(el, attrs, scope);
 }
 
+function setMetaData(attrs: SVGVNodeAttrs, el: Path | TSpan | ZRImage) {
+    const metaData = getElementSSRData(el);
+    if (metaData) {
+        metaData.each((val, key) => {
+            attrs[(META_DATA_PREFIX + key).toLowerCase()]
+                = val + '';
+        });
+        if (el.isSilent()) {
+            attrs[META_DATA_PREFIX + 'silent'] = 'true';
+        }
+    }
+}
+
 function noRotateScale(m: MatrixArray) {
     return isAroundZero(m[0] - 1)
         && isAroundZero(m[1])
@@ -204,8 +223,10 @@ export function brushSVGPath(el: Path, scope: BrushScope) {
 
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
 
     scope.animation && createCSSAnimation(el, attrs, scope);
+    scope.emphasis && createCSSEmphasis(el, attrs, scope);
 
     return createVNode(svgElType, el.id + '', attrs);
 }
@@ -248,6 +269,7 @@ export function brushSVGImage(el: ZRImage, scope: BrushScope) {
 
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
 
     scope.animation && createCSSAnimation(el, attrs, scope);
 
@@ -319,6 +341,7 @@ export function brushSVGTSpan(el: TSpan, scope: BrushScope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
 
     scope.animation && createCSSAnimation(el, attrs, scope);