@lumen5/lottie-web 5.14.0

package/player/js/elements/svgElements/SVGShapeElement.js

@@ -0,0 +1,366 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import { getLocationHref } from '../../main';
+import ShapePropertyFactory from '../../utils/shapes/ShapeProperty';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import SVGBaseElement from './SVGBaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import getBlendMode from '../../utils/helpers/blendModes';
+import Matrix from '../../3rd_party/transformation-matrix';
+import IShapeElement from '../ShapeElement';
+import TransformPropertyFactory from '../../utils/TransformProperty';
+import { ShapeModifiers } from '../../utils/shapes/ShapeModifiers';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../utils/helpers/shapeEnums';
+import SVGShapeData from '../helpers/shapes/SVGShapeData';
+import SVGStyleData from '../helpers/shapes/SVGStyleData';
+import SVGStrokeStyleData from '../helpers/shapes/SVGStrokeStyleData';
+import SVGFillStyleData from '../helpers/shapes/SVGFillStyleData';
+import SVGNoStyleData from '../helpers/shapes/SVGNoStyleData';
+import SVGGradientFillStyleData from '../helpers/shapes/SVGGradientFillStyleData';
+import SVGGradientStrokeStyleData from '../helpers/shapes/SVGGradientStrokeStyleData';
+import ShapeGroupData from '../helpers/shapes/ShapeGroupData';
+import SVGTransformData from '../helpers/shapes/SVGTransformData';
+import SVGElementsRenderer from '../helpers/shapes/SVGElementsRenderer';
+
+function SVGShapeElement(data, globalData, comp) {
+  // List of drawable elements
+  this.shapes = [];
+  // Full shape data
+  this.shapesData = data.shapes;
+  // List of styles that will be applied to shapes
+  this.stylesList = [];
+  // List of modifiers that will be applied to shapes
+  this.shapeModifiers = [];
+  // List of items in shape tree
+  this.itemsData = [];
+  // List of items in previous shape tree
+  this.processedElements = [];
+  // List of animated components
+  this.animatedContents = [];
+  this.initElement(data, globalData, comp);
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+  // List of elements that have been created
+  this.prevViewData = [];
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+}
+
+extendPrototype([BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableDOMElement], SVGShapeElement);
+
+SVGShapeElement.prototype.initSecondaryElement = function () {
+};
+
+SVGShapeElement.prototype.identityMatrix = new Matrix();
+
+SVGShapeElement.prototype.buildExpressionInterface = function () {};
+
+SVGShapeElement.prototype.createContent = function () {
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
+  this.filterUniqueShapes();
+};
+
+/*
+This method searches for multiple shapes that affect a single element and one of them is animated
+*/
+SVGShapeElement.prototype.filterUniqueShapes = function () {
+  var i;
+  var len = this.shapes.length;
+  var shape;
+  var j;
+  var jLen = this.stylesList.length;
+  var style;
+  var tempShapes = [];
+  var areAnimated = false;
+  for (j = 0; j < jLen; j += 1) {
+    style = this.stylesList[j];
+    areAnimated = false;
+    tempShapes.length = 0;
+    for (i = 0; i < len; i += 1) {
+      shape = this.shapes[i];
+      if (shape.styles.indexOf(style) !== -1) {
+        tempShapes.push(shape);
+        areAnimated = shape._isAnimated || areAnimated;
+      }
+    }
+    if (tempShapes.length > 1 && areAnimated) {
+      this.setShapesAsAnimated(tempShapes);
+    }
+  }
+};
+
+SVGShapeElement.prototype.setShapesAsAnimated = function (shapes) {
+  var i;
+  var len = shapes.length;
+  for (i = 0; i < len; i += 1) {
+    shapes[i].setAsAnimated();
+  }
+};
+
+SVGShapeElement.prototype.createStyleElement = function (data, level) {
+  // TODO: prevent drawing of hidden styles
+  var elementData;
+  var styleOb = new SVGStyleData(data, level);
+
+  var pathElement = styleOb.pElem;
+  if (data.ty === 'st') {
+    elementData = new SVGStrokeStyleData(this, data, styleOb);
+  } else if (data.ty === 'fl') {
+    elementData = new SVGFillStyleData(this, data, styleOb);
+  } else if (data.ty === 'gf' || data.ty === 'gs') {
+    var GradientConstructor = data.ty === 'gf' ? SVGGradientFillStyleData : SVGGradientStrokeStyleData;
+    elementData = new GradientConstructor(this, data, styleOb);
+    this.globalData.defs.appendChild(elementData.gf);
+    if (elementData.maskId) {
+      this.globalData.defs.appendChild(elementData.ms);
+      this.globalData.defs.appendChild(elementData.of);
+      pathElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + elementData.maskId + ')');
+    }
+  } else if (data.ty === 'no') {
+    elementData = new SVGNoStyleData(this, data, styleOb);
+  }
+
+  if (data.ty === 'st' || data.ty === 'gs') {
+    pathElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
+    pathElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
+    pathElement.setAttribute('fill-opacity', '0');
+    if (data.lj === 1) {
+      pathElement.setAttribute('stroke-miterlimit', data.ml);
+    }
+  }
+
+  if (data.r === 2) {
+    pathElement.setAttribute('fill-rule', 'evenodd');
+  }
+
+  if (data.ln) {
+    pathElement.setAttribute('id', data.ln);
+  }
+  if (data.cl) {
+    pathElement.setAttribute('class', data.cl);
+  }
+  if (data.bm) {
+    pathElement.style['mix-blend-mode'] = getBlendMode(data.bm);
+  }
+  this.stylesList.push(styleOb);
+  this.addToAnimatedContents(data, elementData);
+  return elementData;
+};
+
+SVGShapeElement.prototype.createGroupElement = function (data) {
+  var elementData = new ShapeGroupData();
+  if (data.ln) {
+    elementData.gr.setAttribute('id', data.ln);
+  }
+  if (data.cl) {
+    elementData.gr.setAttribute('class', data.cl);
+  }
+  if (data.bm) {
+    elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);
+  }
+  return elementData;
+};
+
+SVGShapeElement.prototype.createTransformElement = function (data, container) {
+  var transformProperty = TransformPropertyFactory.getTransformProperty(this, data, this);
+  var elementData = new SVGTransformData(transformProperty, transformProperty.o, container);
+  this.addToAnimatedContents(data, elementData);
+  return elementData;
+};
+
+SVGShapeElement.prototype.createShapeElement = function (data, ownTransformers, level) {
+  var ty = 4;
+  if (data.ty === 'rc') {
+    ty = 5;
+  } else if (data.ty === 'el') {
+    ty = 6;
+  } else if (data.ty === 'sr') {
+    ty = 7;
+  }
+  var shapeProperty = ShapePropertyFactory.getShapeProp(this, data, ty, this);
+  var elementData = new SVGShapeData(ownTransformers, level, shapeProperty);
+  this.shapes.push(elementData);
+  this.addShapeToModifiers(elementData);
+  this.addToAnimatedContents(data, elementData);
+  return elementData;
+};
+
+SVGShapeElement.prototype.addToAnimatedContents = function (data, element) {
+  var i = 0;
+  var len = this.animatedContents.length;
+  while (i < len) {
+    if (this.animatedContents[i].element === element) {
+      return;
+    }
+    i += 1;
+  }
+  this.animatedContents.push({
+    fn: SVGElementsRenderer.createRenderFunction(data),
+    element: element,
+    data: data,
+  });
+};
+
+SVGShapeElement.prototype.setElementStyles = function (elementData) {
+  var arr = elementData.styles;
+  var j;
+  var jLen = this.stylesList.length;
+  for (j = 0; j < jLen; j += 1) {
+    if (arr.indexOf(this.stylesList[j]) === -1 && !this.stylesList[j].closed) {
+      arr.push(this.stylesList[j]);
+    }
+  }
+};
+
+SVGShapeElement.prototype.reloadShapes = function () {
+  this._isFirstFrame = true;
+  var i;
+  var len = this.itemsData.length;
+  for (i = 0; i < len; i += 1) {
+    this.prevViewData[i] = this.itemsData[i];
+  }
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
+  this.filterUniqueShapes();
+  len = this.dynamicProperties.length;
+  for (i = 0; i < len; i += 1) {
+    this.dynamicProperties[i].getValue();
+  }
+  this.renderModifiers();
+};
+
+SVGShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, container, level, transformers, render) {
+  var ownTransformers = [].concat(transformers);
+  var i;
+  var len = arr.length - 1;
+  var j;
+  var jLen;
+  var ownStyles = [];
+  var ownModifiers = [];
+  var currentTransform;
+  var modifier;
+  var processedPos;
+  for (i = len; i >= 0; i -= 1) {
+    processedPos = this.searchProcessedElement(arr[i]);
+    if (!processedPos) {
+      arr[i]._render = render;
+    } else {
+      itemsData[i] = prevViewData[processedPos - 1];
+    }
+    if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs' || arr[i].ty === 'no') {
+      if (!processedPos) {
+        itemsData[i] = this.createStyleElement(arr[i], level);
+      } else {
+        itemsData[i].style.closed = arr[i].hd;
+      }
+      if (arr[i]._render) {
+        if (itemsData[i].style.pElem.parentNode !== container) {
+          container.appendChild(itemsData[i].style.pElem);
+        }
+      }
+      ownStyles.push(itemsData[i].style);
+    } else if (arr[i].ty === 'gr') {
+      if (!processedPos) {
+        itemsData[i] = this.createGroupElement(arr[i]);
+      } else {
+        jLen = itemsData[i].it.length;
+        for (j = 0; j < jLen; j += 1) {
+          itemsData[i].prevViewData[j] = itemsData[i].it[j];
+        }
+      }
+      this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, itemsData[i].gr, level + 1, ownTransformers, render);
+      if (arr[i]._render) {
+        if (itemsData[i].gr.parentNode !== container) {
+          container.appendChild(itemsData[i].gr);
+        }
+      }
+    } else if (arr[i].ty === 'tr') {
+      if (!processedPos) {
+        itemsData[i] = this.createTransformElement(arr[i], container);
+      }
+      currentTransform = itemsData[i].transform;
+      ownTransformers.push(currentTransform);
+    } else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {
+      if (!processedPos) {
+        itemsData[i] = this.createShapeElement(arr[i], ownTransformers, level);
+      }
+      this.setElementStyles(itemsData[i]);
+    } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'ms' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {
+      if (!processedPos) {
+        modifier = ShapeModifiers.getModifier(arr[i].ty);
+        modifier.init(this, arr[i]);
+        itemsData[i] = modifier;
+        this.shapeModifiers.push(modifier);
+      } else {
+        modifier = itemsData[i];
+        modifier.closed = false;
+      }
+      ownModifiers.push(modifier);
+    } else if (arr[i].ty === 'rp') {
+      if (!processedPos) {
+        modifier = ShapeModifiers.getModifier(arr[i].ty);
+        itemsData[i] = modifier;
+        modifier.init(this, arr, i, itemsData);
+        this.shapeModifiers.push(modifier);
+        render = false;
+      } else {
+        modifier = itemsData[i];
+        modifier.closed = true;
+      }
+      ownModifiers.push(modifier);
+    }
+    this.addProcessedElement(arr[i], i + 1);
+  }
+  len = ownStyles.length;
+  for (i = 0; i < len; i += 1) {
+    ownStyles[i].closed = true;
+  }
+  len = ownModifiers.length;
+  for (i = 0; i < len; i += 1) {
+    ownModifiers[i].closed = true;
+  }
+};
+
+SVGShapeElement.prototype.renderInnerContent = function () {
+  this.renderModifiers();
+  var i;
+  var len = this.stylesList.length;
+  for (i = 0; i < len; i += 1) {
+    this.stylesList[i].reset();
+  }
+  this.renderShape();
+  for (i = 0; i < len; i += 1) {
+    if (this.stylesList[i]._mdf || this._isFirstFrame) {
+      if (this.stylesList[i].msElem) {
+        this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d);
+        // Adding M0 0 fixes same mask bug on all browsers
+        this.stylesList[i].d = 'M0 0' + this.stylesList[i].d;
+      }
+      this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d || 'M0 0');
+    }
+  }
+};
+
+SVGShapeElement.prototype.renderShape = function () {
+  var i;
+  var len = this.animatedContents.length;
+  var animatedContent;
+  for (i = 0; i < len; i += 1) {
+    animatedContent = this.animatedContents[i];
+    if ((this._isFirstFrame || animatedContent.element._isAnimated) && animatedContent.data !== true) {
+      animatedContent.fn(animatedContent.data, animatedContent.element, this._isFirstFrame);
+    }
+  }
+};
+
+SVGShapeElement.prototype.destroy = function () {
+  this.destroyBaseElement();
+  this.shapesData = null;
+  this.itemsData = null;
+};
+
+export default SVGShapeElement;

package/player/js/elements/svgElements/SVGTextElement.js

@@ -0,0 +1,322 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import createNS from '../../utils/helpers/svg_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import SVGBaseElement from './SVGBaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import ITextElement from '../TextElement';
+import SVGCompElement from './SVGCompElement'; // eslint-disable-line
+import SVGShapeElement from './SVGShapeElement';
+
+var emptyShapeData = {
+  shapes: [],
+};
+
+function SVGTextLottieElement(data, globalData, comp) {
+  this.textSpans = [];
+  this.renderType = 'svg';
+  this.initElement(data, globalData, comp);
+}
+
+extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], SVGTextLottieElement);
+
+SVGTextLottieElement.prototype.createContent = function () {
+  if (this.data.singleShape && !this.globalData.fontManager.chars) {
+    this.textContainer = createNS('text');
+  }
+};
+
+SVGTextLottieElement.prototype.buildTextContents = function (textArray) {
+  var i = 0;
+  var len = textArray.length;
+  var textContents = [];
+  var currentTextContent = '';
+  while (i < len) {
+    if (textArray[i] === String.fromCharCode(13) || textArray[i] === String.fromCharCode(3)) {
+      textContents.push(currentTextContent);
+      currentTextContent = '';
+    } else {
+      currentTextContent += textArray[i];
+    }
+    i += 1;
+  }
+  textContents.push(currentTextContent);
+  return textContents;
+};
+
+SVGTextLottieElement.prototype.buildShapeData = function (data, scale) {
+  // data should probably be cloned to apply scale separately to each instance of a text on different layers
+  // but since text internal content gets only rendered once and then it's never rerendered,
+  // it's probably safe not to clone data and reuse always the same instance even if the object is mutated.
+  // Avoiding cloning is preferred since cloning each character shape data is expensive
+  if (data.shapes && data.shapes.length) {
+    var shape = data.shapes[0];
+    if (shape.it) {
+      var shapeItem = shape.it[shape.it.length - 1];
+      if (shapeItem.s) {
+        shapeItem.s.k[0] = scale;
+        shapeItem.s.k[1] = scale;
+      }
+    }
+  }
+  return data;
+};
+
+SVGTextLottieElement.prototype.buildNewText = function () {
+  this.addDynamicProperty(this);
+  var i;
+  var len;
+
+  var documentData = this.textProperty.currentData;
+  this.renderedLetters = createSizedArray(documentData ? documentData.l.length : 0);
+  if (documentData.fc) {
+    this.layerElement.setAttribute('fill', this.buildColor(documentData.fc));
+  } else {
+    this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');
+  }
+  if (documentData.sc) {
+    this.layerElement.setAttribute('stroke', this.buildColor(documentData.sc));
+    this.layerElement.setAttribute('stroke-width', documentData.sw);
+  }
+  this.layerElement.setAttribute('font-size', documentData.finalSize);
+  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
+  if (fontData.fClass) {
+    this.layerElement.setAttribute('class', fontData.fClass);
+  } else {
+    this.layerElement.setAttribute('font-family', fontData.fFamily);
+    var fWeight = documentData.fWeight;
+    var fStyle = documentData.fStyle;
+    this.layerElement.setAttribute('font-style', fStyle);
+    this.layerElement.setAttribute('font-weight', fWeight);
+  }
+  this.layerElement.setAttribute('aria-label', documentData.t);
+
+  var letters = documentData.l || [];
+  var usesGlyphs = !!this.globalData.fontManager.chars;
+  len = letters.length;
+
+  var tSpan;
+  var matrixHelper = this.mHelper;
+  var shapeStr = '';
+  var singleShape = this.data.singleShape;
+  var xPos = 0;
+  var yPos = 0;
+  var firstLine = true;
+  var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;
+  if (singleShape && !usesGlyphs && !documentData.sz) {
+    var tElement = this.textContainer;
+    var justify = 'start';
+    switch (documentData.j) {
+      case 1:
+        justify = 'end';
+        break;
+      case 2:
+        justify = 'middle';
+        break;
+      default:
+        justify = 'start';
+        break;
+    }
+    tElement.setAttribute('text-anchor', justify);
+    tElement.setAttribute('letter-spacing', trackingOffset);
+    var textContent = this.buildTextContents(documentData.finalText);
+    len = textContent.length;
+    yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
+    for (i = 0; i < len; i += 1) {
+      tSpan = this.textSpans[i].span || createNS('tspan');
+      tSpan.textContent = textContent[i];
+      tSpan.setAttribute('x', 0);
+      tSpan.setAttribute('y', yPos);
+      tSpan.style.display = 'inherit';
+      tElement.appendChild(tSpan);
+      if (!this.textSpans[i]) {
+        this.textSpans[i] = {
+          span: null,
+          glyph: null,
+        };
+      }
+      this.textSpans[i].span = tSpan;
+      yPos += documentData.finalLineHeight;
+    }
+
+    this.layerElement.appendChild(tElement);
+  } else {
+    var cachedSpansLength = this.textSpans.length;
+    var charData;
+    for (i = 0; i < len; i += 1) {
+      if (!this.textSpans[i]) {
+        this.textSpans[i] = {
+          span: null,
+          childSpan: null,
+          glyph: null,
+        };
+      }
+      if (!usesGlyphs || !singleShape || i === 0) {
+        tSpan = cachedSpansLength > i ? this.textSpans[i].span : createNS(usesGlyphs ? 'g' : 'text');
+        if (cachedSpansLength <= i) {
+          tSpan.setAttribute('stroke-linecap', 'butt');
+          tSpan.setAttribute('stroke-linejoin', 'round');
+          tSpan.setAttribute('stroke-miterlimit', '4');
+          this.textSpans[i].span = tSpan;
+          if (usesGlyphs) {
+            var childSpan = createNS('g');
+            tSpan.appendChild(childSpan);
+            this.textSpans[i].childSpan = childSpan;
+          }
+          this.textSpans[i].span = tSpan;
+          this.layerElement.appendChild(tSpan);
+        }
+        tSpan.style.display = 'inherit';
+      }
+
+      matrixHelper.reset();
+      if (singleShape) {
+        if (letters[i].n) {
+          xPos = -trackingOffset;
+          yPos += documentData.yOffset;
+          yPos += firstLine ? 1 : 0;
+          firstLine = false;
+        }
+        this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
+        xPos += letters[i].l || 0;
+        // xPos += letters[i].val === ' ' ? 0 : trackingOffset;
+        xPos += trackingOffset;
+      }
+      if (usesGlyphs) {
+        charData = this.globalData.fontManager.getCharData(
+          documentData.finalText[i],
+          fontData.fStyle,
+          this.globalData.fontManager.getFontByName(documentData.f).fFamily
+        );
+        var glyphElement;
+        // t === 1 means the character has been replaced with an animated shaped
+        if (charData.t === 1) {
+          glyphElement = new SVGCompElement(charData.data, this.globalData, this);
+        } else {
+          var data = emptyShapeData;
+          if (charData.data && charData.data.shapes) {
+            data = this.buildShapeData(charData.data, documentData.finalSize);
+          }
+          glyphElement = new SVGShapeElement(data, this.globalData, this);
+        }
+        if (this.textSpans[i].glyph) {
+          var glyph = this.textSpans[i].glyph;
+          this.textSpans[i].childSpan.removeChild(glyph.layerElement);
+          glyph.destroy();
+        }
+        this.textSpans[i].glyph = glyphElement;
+        glyphElement._debug = true;
+        glyphElement.prepareFrame(0);
+        glyphElement.renderFrame();
+        this.textSpans[i].childSpan.appendChild(glyphElement.layerElement);
+        // when using animated shapes, the layer will be scaled instead of replacing the internal scale
+        // this might have issues with strokes and might need a different solution
+        if (charData.t === 1) {
+          this.textSpans[i].childSpan.setAttribute('transform', 'scale(' + documentData.finalSize / 100 + ',' + documentData.finalSize / 100 + ')');
+        }
+      } else {
+        if (singleShape) {
+          tSpan.setAttribute('transform', 'translate(' + matrixHelper.props[12] + ',' + matrixHelper.props[13] + ')');
+        }
+        tSpan.textContent = letters[i].val;
+        tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      }
+      //
+    }
+    if (singleShape && tSpan) {
+      tSpan.setAttribute('d', shapeStr);
+    }
+  }
+  while (i < this.textSpans.length) {
+    this.textSpans[i].span.style.display = 'none';
+    i += 1;
+  }
+
+  this._sizeChanged = true;
+};
+
+SVGTextLottieElement.prototype.sourceRectAtTime = function () {
+  this.prepareFrame(this.comp.renderedFrame - this.data.st);
+  this.renderInnerContent();
+  if (this._sizeChanged) {
+    this._sizeChanged = false;
+    var textBox = this.layerElement.getBBox();
+    this.bbox = {
+      top: textBox.y,
+      left: textBox.x,
+      width: textBox.width,
+      height: textBox.height,
+    };
+  }
+  return this.bbox;
+};
+
+SVGTextLottieElement.prototype.getValue = function () {
+  var i;
+  var len = this.textSpans.length;
+  var glyphElement;
+  this.renderedFrame = this.comp.renderedFrame;
+  for (i = 0; i < len; i += 1) {
+    glyphElement = this.textSpans[i].glyph;
+    if (glyphElement) {
+      glyphElement.prepareFrame(this.comp.renderedFrame - this.data.st);
+      if (glyphElement._mdf) {
+        this._mdf = true;
+      }
+    }
+  }
+};
+
+SVGTextLottieElement.prototype.renderInnerContent = function () {
+  this.validateText();
+  if (!this.data.singleShape || this._mdf) {
+    this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
+    if (this.lettersChangedFlag || this.textAnimator.lettersChangedFlag) {
+      this._sizeChanged = true;
+      var i;
+      var len;
+      var renderedLetters = this.textAnimator.renderedLetters;
+
+      var letters = this.textProperty.currentData.l;
+
+      len = letters.length;
+      var renderedLetter;
+      var textSpan;
+      var glyphElement;
+      for (i = 0; i < len; i += 1) {
+        if (!letters[i].n) {
+          renderedLetter = renderedLetters[i];
+          textSpan = this.textSpans[i].span;
+          glyphElement = this.textSpans[i].glyph;
+          if (glyphElement) {
+            glyphElement.renderFrame();
+          }
+          if (renderedLetter._mdf.m) {
+            textSpan.setAttribute('transform', renderedLetter.m);
+          }
+          if (renderedLetter._mdf.o) {
+            textSpan.setAttribute('opacity', renderedLetter.o);
+          }
+          if (renderedLetter._mdf.sw) {
+            textSpan.setAttribute('stroke-width', renderedLetter.sw);
+          }
+          if (renderedLetter._mdf.sc) {
+            textSpan.setAttribute('stroke', renderedLetter.sc);
+          }
+          if (renderedLetter._mdf.fc) {
+            textSpan.setAttribute('fill', renderedLetter.fc);
+          }
+        }
+      }
+    }
+  }
+};
+
+export default SVGTextLottieElement;