fix(svg): clear text when mouse leaves

[Ovilia]

Fix apache/echarts#11543 .

This commit can remove the text. But when the mouse hovers on the circle again, the text doesn't show up.

[pissang]

The textSvgEl is inserted to the document in https://github.com/ecomfe/zrender/blob/master/src/svg/Painter.js#L231 . And it will only be executed when element is drawn in the first time.

So if you remove it from the document when text property is updated to null in https://github.com/ecomfe/zrender/pull/535/files#diff-5bb01bd8925bd801f17e33bdb859d019R515. It won't be insert to the document again when text is set to another value.

A better way to not display this text element is removing the tspan elements.

[Ovilia]

@pissang But it has the same behavior with tspan:

function removeOldTextNode(el) {
    if (el && el.__textSvgEl) {
        var children = el.__textSvgEl.children;
        for (var i = 0; i < children.length; ++i) {
            if (children[i]) {
                el.__textSvgEl.removeChild(children[i]);
            }
        }
    }
}

[pissang]

It seems you need to reset more cached properties.

function removeOldTextNode(el) {
    if (el && el.__textSvgEl) {
        el.__textSvgEl.parentNode.removeChild(el.__textSvgEl);
        el.__textSvgEl = null;
        el.__tspanList = [];
        el.__text = null;
    }
}

Also the new created svg text dom needs to be add to document when updating the element in
https://github.com/ecomfe/zrender/blob/master/src/svg/Painter.js#L244

else if (!item.removed) {
                for (var k = 0; k < item.count; k++) {
                    var displayable = newVisibleList[item.indices[k]];

                    var svgElement = getSvgElement(displayable);
                    var textSvgElement = getTextSvgElement(displayable);

                    this.gradientManager.markUsed(displayable);
                    this.gradientManager
                        .addWithoutUpdate(svgElement || textSvgElement, displayable);

                    this.shadowManager.markUsed(displayable);
                    this.shadowManager
                        .addWithoutUpdate(svgElement || textSvgElement, displayable);

                    this.clipPathManager.markUsed(displayable);

                    if (textSvgElement) {   // Insert text.
                        insertAfter(svgRoot, textSvgElement, svgElement);
                    }
                    prevSvgElement = svgElement
                        || textSvgElement || prevSvgElement;

                }