From 027c534b22fc9f55bdb3f0a47f5143c19f07153a Mon Sep 17 00:00:00 2001 From: Eric Willigers Date: Tue, 9 Aug 2016 15:13:31 +1000 Subject: [PATCH] Support animation of SVG color properties Animation of 'fill', 'flood-color', 'lighting-color', 'stop-color', 'stroke' is now supported. --- src/color-handler.js | 3 ++- test/js/color-handler.js | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/color-handler.js b/src/color-handler.js index c5d96ce1..69fcbdfb 100644 --- a/src/color-handler.js +++ b/src/color-handler.js @@ -52,7 +52,8 @@ scope.addPropertiesHandler(parseColor, mergeColors, ['background-color', 'border-bottom-color', 'border-left-color', 'border-right-color', - 'border-top-color', 'color', 'outline-color', 'text-decoration-color']); + 'border-top-color', 'color', 'fill', 'flood-color', 'lighting-color', + 'outline-color', 'stop-color', 'stroke', 'text-decoration-color']); scope.consumeColor = scope.consumeParenthesised.bind(null, parseColor); scope.mergeColors = mergeColors; diff --git a/test/js/color-handler.js b/test/js/color-handler.js index 74df31ac..eb0950b0 100644 --- a/test/js/color-handler.js +++ b/test/js/color-handler.js @@ -20,6 +20,13 @@ suite('color-handler', function() { assert.equal(webAnimations1.propertyInterpolation('color', 'red', 'green')(2), 'rgba(0,255,0,1)'); assert.equal(webAnimations1.propertyInterpolation('color', 'red', 'green')(-1), 'rgba(255,0,0,1)'); }); + test('svg color interpolation', function() { + assert.equal(webAnimations1.propertyInterpolation('fill', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)'); + assert.equal(webAnimations1.propertyInterpolation('floodColor', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)'); + assert.equal(webAnimations1.propertyInterpolation('lightingColor', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)'); + assert.equal(webAnimations1.propertyInterpolation('stopColor', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)'); + assert.equal(webAnimations1.propertyInterpolation('stroke', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)'); + }); test('interpolation to/from initial', function() { assert.equal(webAnimations1.propertyInterpolation('backgroundColor', 'initial', 'red')(0.5), 'rgba(255,0,0,0.500)'); });