added blend mode support for shapes in svg renderer
diff --git a/player/index.html b/player/index.html
index e26aa35..5371d05 100644
--- a/player/index.html
+++ b/player/index.html
@@ -30,6 +30,7 @@
<script src="js/utils/helpers/svg_elements.js" data-builds="full,svg,svg_light,html,html_light"></script>
<script src="js/utils/helpers/html_elements.js"></script>
<script src="js/utils/helpers/dynamicProperties.js"></script>
+ <script src="js/utils/helpers/blendModes.js"></script>
<script src="js/3rd_party/transformation-matrix.js"></script>
<script src="js/3rd_party/seedrandom.js"></script>
<script src="js/3rd_party/BezierEaser.js"></script>
@@ -160,7 +161,7 @@
var elem = document.getElementById('lottie');
var animData = {
container: elem,
- renderer: 'canvas',
+ renderer: 'svg',
loop: true,
autoplay: true,
rendererSettings: {
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index d2fee77..4c487cd 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -33,28 +33,8 @@
this.layerInterface.text = this.layerInterface.textInterface;
}
},
- blendModeEnums: {
- 1:'multiply',
- 2:'screen',
- 3:'overlay',
- 4:'darken',
- 5:'lighten',
- 6:'color-dodge',
- 7:'color-burn',
- 8:'hard-light',
- 9:'soft-light',
- 10:'difference',
- 11:'exclusion',
- 12:'hue',
- 13:'saturation',
- 14:'color',
- 15:'luminosity'
- },
- getBlendMode: function(){
- return this.blendModeEnums[this.data.bm] || '';
- },
setBlendMode: function(){
- var blendModeValue = this.getBlendMode();
+ var blendModeValue = getBlendMode(this.data.bm);
var elem = this.baseElement || this.layerElement;
elem.style['mix-blend-mode'] = blendModeValue;
diff --git a/player/js/elements/canvasElements/CVBaseElement.js b/player/js/elements/canvasElements/CVBaseElement.js
index dc8040d..bd4f5f8 100644
--- a/player/js/elements/canvasElements/CVBaseElement.js
+++ b/player/js/elements/canvasElements/CVBaseElement.js
@@ -13,7 +13,7 @@
var globalData = this.globalData;
if(globalData.blendMode !== this.data.bm) {
globalData.blendMode = this.data.bm;
- var blendModeValue = this.getBlendMode();
+ var blendModeValue = getBlendMode(this.data.bm);
globalData.canvasContext.globalCompositeOperation = blendModeValue;
}
},
diff --git a/player/js/elements/svgElements/SVGShapeElement.js b/player/js/elements/svgElements/SVGShapeElement.js
index d4db93e..95c6975 100644
--- a/player/js/elements/svgElements/SVGShapeElement.js
+++ b/player/js/elements/svgElements/SVGShapeElement.js
@@ -107,6 +107,9 @@
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;
@@ -120,6 +123,9 @@
if(data.cl){
elementData.gr.setAttribute('class',data.cl);
}
+ if(data.bm){
+ elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);
+ }
return elementData;
};
diff --git a/player/js/utils/helpers/blendModes.js b/player/js/utils/helpers/blendModes.js
new file mode 100644
index 0000000..5166f74
--- /dev/null
+++ b/player/js/utils/helpers/blendModes.js
@@ -0,0 +1,24 @@
+var getBlendMode = (function() {
+
+ var blendModeEnums = {
+ 1:'multiply',
+ 2:'screen',
+ 3:'overlay',
+ 4:'darken',
+ 5:'lighten',
+ 6:'color-dodge',
+ 7:'color-burn',
+ 8:'hard-light',
+ 9:'soft-light',
+ 10:'difference',
+ 11:'exclusion',
+ 12:'hue',
+ 13:'saturation',
+ 14:'color',
+ 15:'luminosity'
+ }
+
+ return function(mode) {
+ return blendModeEnums[mode] || '';
+ }
+}())
\ No newline at end of file
