| function SVGBaseElement() { |
| } |
| |
| SVGBaseElement.prototype = { |
| initRendererElement: function () { |
| this.layerElement = createNS('g'); |
| }, |
| createContainerElements: function () { |
| this.matteElement = createNS('g'); |
| this.transformedElement = this.layerElement; |
| this.maskedElement = this.layerElement; |
| this._sizeChanged = false; |
| var layerElementParent = null; |
| // If this layer acts as a mask for the following layer |
| var filId, fil, gg; |
| if (this.data.td) { |
| if (this.data.td == 3 || this.data.td == 1) { |
| var masker = createNS('mask'); |
| masker.setAttribute('id', this.layerId); |
| masker.setAttribute('mask-type', this.data.td == 3 ? 'luminance' : 'alpha'); |
| masker.appendChild(this.layerElement); |
| layerElementParent = masker; |
| this.globalData.defs.appendChild(masker); |
| // This is only for IE and Edge when mask if of type alpha |
| if (!featureSupport.maskType && this.data.td == 1) { |
| masker.setAttribute('mask-type', 'luminance'); |
| filId = createElementID(); |
| fil = filtersFactory.createFilter(filId); |
| this.globalData.defs.appendChild(fil); |
| fil.appendChild(filtersFactory.createAlphaToLuminanceFilter()); |
| gg = createNS('g'); |
| gg.appendChild(this.layerElement); |
| layerElementParent = gg; |
| masker.appendChild(gg); |
| gg.setAttribute('filter', 'url(' + locationHref + '#' + filId + ')'); |
| } |
| } else if (this.data.td == 2) { |
| var maskGroup = createNS('mask'); |
| maskGroup.setAttribute('id', this.layerId); |
| maskGroup.setAttribute('mask-type', 'alpha'); |
| var maskGrouper = createNS('g'); |
| maskGroup.appendChild(maskGrouper); |
| filId = createElementID(); |
| fil = filtersFactory.createFilter(filId); |
| /// / |
| |
| // This solution doesn't work on Android when meta tag with viewport attribute is set |
| /* var feColorMatrix = createNS('feColorMatrix'); |
| feColorMatrix.setAttribute('type', 'matrix'); |
| feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB'); |
| feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 -1 1'); |
| fil.appendChild(feColorMatrix); */ |
| /// / |
| var feCTr = createNS('feComponentTransfer'); |
| feCTr.setAttribute('in', 'SourceGraphic'); |
| fil.appendChild(feCTr); |
| var feFunc = createNS('feFuncA'); |
| feFunc.setAttribute('type', 'table'); |
| feFunc.setAttribute('tableValues', '1.0 0.0'); |
| feCTr.appendChild(feFunc); |
| /// / |
| this.globalData.defs.appendChild(fil); |
| var alphaRect = createNS('rect'); |
| alphaRect.setAttribute('width', this.comp.data.w); |
| alphaRect.setAttribute('height', this.comp.data.h); |
| alphaRect.setAttribute('x', '0'); |
| alphaRect.setAttribute('y', '0'); |
| alphaRect.setAttribute('fill', '#ffffff'); |
| alphaRect.setAttribute('opacity', '0'); |
| maskGrouper.setAttribute('filter', 'url(' + locationHref + '#' + filId + ')'); |
| maskGrouper.appendChild(alphaRect); |
| maskGrouper.appendChild(this.layerElement); |
| layerElementParent = maskGrouper; |
| if (!featureSupport.maskType) { |
| maskGroup.setAttribute('mask-type', 'luminance'); |
| fil.appendChild(filtersFactory.createAlphaToLuminanceFilter()); |
| gg = createNS('g'); |
| maskGrouper.appendChild(alphaRect); |
| gg.appendChild(this.layerElement); |
| layerElementParent = gg; |
| maskGrouper.appendChild(gg); |
| } |
| this.globalData.defs.appendChild(maskGroup); |
| } |
| } else if (this.data.tt) { |
| this.matteElement.appendChild(this.layerElement); |
| layerElementParent = this.matteElement; |
| this.baseElement = this.matteElement; |
| } else { |
| this.baseElement = this.layerElement; |
| } |
| if (this.data.ln) { |
| this.layerElement.setAttribute('id', this.data.ln); |
| } |
| if (this.data.cl) { |
| this.layerElement.setAttribute('class', this.data.cl); |
| } |
| // Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped |
| if (this.data.ty === 0 && !this.data.hd) { |
| var cp = createNS('clipPath'); |
| var pt = createNS('path'); |
| pt.setAttribute('d', 'M0,0 L' + this.data.w + ',0' + ' L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z'); |
| var clipId = createElementID(); |
| cp.setAttribute('id', clipId); |
| cp.appendChild(pt); |
| this.globalData.defs.appendChild(cp); |
| |
| if (this.checkMasks()) { |
| var cpGroup = createNS('g'); |
| cpGroup.setAttribute('clip-path', 'url(' + locationHref + '#' + clipId + ')'); |
| cpGroup.appendChild(this.layerElement); |
| this.transformedElement = cpGroup; |
| if (layerElementParent) { |
| layerElementParent.appendChild(this.transformedElement); |
| } else { |
| this.baseElement = this.transformedElement; |
| } |
| } else { |
| this.layerElement.setAttribute('clip-path', 'url(' + locationHref + '#' + clipId + ')'); |
| } |
| |
| } |
| if (this.data.bm !== 0) { |
| this.setBlendMode(); |
| } |
| |
| }, |
| renderElement: function () { |
| if (this.finalTransform._matMdf) { |
| this.transformedElement.setAttribute('transform', this.finalTransform.mat.to2dCSS()); |
| } |
| if (this.finalTransform._opMdf) { |
| this.transformedElement.setAttribute('opacity', this.finalTransform.mProp.o.v); |
| } |
| }, |
| destroyBaseElement: function () { |
| this.layerElement = null; |
| this.matteElement = null; |
| this.maskManager.destroy(); |
| }, |
| getBaseElement: function () { |
| if (this.data.hd) { |
| return null; |
| } |
| return this.baseElement; |
| }, |
| createRenderableComponents: function () { |
| this.maskManager = new MaskElement(this.data, this, this.globalData); |
| this.renderableEffectsManager = new SVGEffects(this); |
| }, |
| setMatte: function (id) { |
| if (!this.matteElement) { |
| return; |
| } |
| this.matteElement.setAttribute('mask', 'url(' + locationHref + '#' + id + ')'); |
| }, |
| }; |
