From 75195903214f974854cf041f65e96702e0ac146a Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Tue, 17 Jul 2018 10:08:49 -0400 Subject: [PATCH] Fix gradients applied to text. Two things: 1. Apply a gradientTransform for text items that reverse the text transform. This is required because we do not use x/y for text, and gradients are impacted by the transforms. 2. Always apply the style to text elements instead of allowing them to be applied to the parent group if the text element is alone. This is so the fill property is always on the text element so the gradient transforms work. --- src/svg/SvgExport.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/svg/SvgExport.js b/src/svg/SvgExport.js index 7af40699..954e589f 100644 --- a/src/svg/SvgExport.js +++ b/src/svg/SvgExport.js @@ -194,7 +194,7 @@ new function() { return SvgElement.create('use', attrs, formatter); } - function exportGradient(color) { + function exportGradient(color, item) { // NOTE: As long as the fillTransform attribute is not implemented, // we need to create a separate gradient object for each gradient, // even when they share the same gradient definition. @@ -226,6 +226,13 @@ new function() { y2: destination.y }; } + // Scratch-specific: apply inverse of item transform for text elements + // because they use transform instead of x/y. + if (item instanceof paper.PointText) { + attrs.gradientTransform = getTransform( + item._matrix.clone().invert(), false, formatter).transform; + } + attrs.gradientUnits = 'userSpaceOnUse'; gradientNode = SvgElement.create((radial ? 'radial' : 'linear') + 'Gradient', attrs, formatter); @@ -298,7 +305,10 @@ new function() { value = item[get](); if (entry.exportFilter ? entry.exportFilter(item, value) - : !parent || !Base.equals(parent[get](), value)) { + : !parent || !Base.equals(parent[get](), value) || + // Scratch-specific: always apply styles to text elements to + // because gradients must be specified to avoid transform problems. + item instanceof paper.PointText) { if (type === 'color' && value != null) { // Support for css-style rgba() values is not in SVG 1.1, so // separate the alpha value of colors with alpha into the