diff --git a/src/svg/Painter.js b/src/svg/Painter.js index bb3f8db79..08f32f9f4 100644 --- a/src/svg/Painter.js +++ b/src/svg/Painter.js @@ -154,11 +154,9 @@ SVGPainter.prototype = { if (!displayable.invisible) { if (displayable.__dirty) { svgProxy && svgProxy.brush(displayable); - var el = getSvgElement(displayable) - || getTextSvgElement(displayable); // Update clipPath - this.clipPathManager.update(displayable, el); + this.clipPathManager.update(displayable); // Update gradient if (displayable.style) { diff --git a/src/svg/graphic.js b/src/svg/graphic.js index 99a7d4894..a6e83c3d3 100644 --- a/src/svg/graphic.js +++ b/src/svg/graphic.js @@ -334,10 +334,13 @@ var svgTextDrawRectText = function (el, rect, textRect) { var text = style.text; // Convert to string - text != null && (text += ''); - if (!text) { + if (text == null) { + // Draw no text only when text is set to null, but not '' return; } + else { + text += ''; + } var textSvgEl = el.__textSvgEl; if (! textSvgEl) { diff --git a/src/svg/helper/ClippathManager.js b/src/svg/helper/ClippathManager.js index 9a33151a6..f98da5de7 100644 --- a/src/svg/helper/ClippathManager.js +++ b/src/svg/helper/ClippathManager.js @@ -26,10 +26,12 @@ zrUtil.inherits(ClippathManager, Definable); * Update clipPath. * * @param {Displayable} displayable displayable element - * @param {SVGElement} svgElement SVG element of displayable */ -ClippathManager.prototype.update = function (displayable, svgElement) { - this.updateDom(svgElement, displayable.__clipPaths, false); +ClippathManager.prototype.update = function (displayable) { + var svgEl = this.getSvgElement(displayable); + if (svgEl) { + this.updateDom(svgEl, displayable.__clipPaths, false); + } var textEl = this.getTextSvgElement(displayable); if (textEl) { @@ -121,7 +123,13 @@ ClippathManager.prototype.updateDom = function ( } var pathEl = this.getSvgElement(clipPath); - clipPathEl.appendChild(pathEl); + /** + * Use `cloneNode()` here to appendChild to multiple parents, + * which may happend when Text and other shapes are using the same + * clipPath. Since Text will create an extra clipPath DOM due to + * different transform rules. + */ + clipPathEl.appendChild(pathEl.cloneNode()); parentEl.setAttribute('clip-path', 'url(#' + id + ')');