Merge pull request #652 from SVG-Edit/fix-gradient

Gradient support for href
master
JFH 2021-09-28 17:59:39 +02:00 committed by GitHub
commit 1930c09285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 8 deletions

View File

@ -56,13 +56,23 @@ export default class Paint {
this.type = 'linearGradient';
this.solidColor = null;
this.radialGradient = null;
this.linearGradient = options.linearGradient.cloneNode(true);
if(options.linearGradient.hasAttribute('xlink:href')) {
const xhref = document.getElementById(options.linearGradient.getAttribute('xlink:href').substr(1));
this.linearGradient = xhref.cloneNode(true);
} else {
this.linearGradient = options.linearGradient.cloneNode(true);
}
// create linear gradient paint
} else if (options.radialGradient) {
this.type = 'radialGradient';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = options.radialGradient.cloneNode(true);
if(options.radialGradient.hasAttribute('xlink:href')) {
const xhref = document.getElementById(options.radialGradient.getAttribute('xlink:href').substr(1));
this.radialGradient = xhref.cloneNode(true);
} else {
this.radialGradient = options.radialGradient.cloneNode(true);
}
// create solid color paint
} else if (options.solidColor) {
this.type = 'solidColor';
@ -75,4 +85,4 @@ export default class Paint {
this.radialGradient = null;
}
}
}
}

View File

@ -1051,21 +1051,29 @@ export const convertGradientsMethod = function (elem) {
return (curThis.tagName.includes('Gradient'));
});
}
Array.prototype.forEach.call(elems, function (grad) {
if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') {
const svgcontent = svgContext_.getSVGContent();
// TODO: Support more than one element with this ref by duplicating parent grad
const fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]');
if (!fillStrokeElems.length) { return; }
let fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]');
if (!fillStrokeElems.length) {
const tmpFillStrokeElems = svgcontent.querySelectorAll('[*|href="#' + grad.id + '"]');
if (!tmpFillStrokeElems.length) {
return;
} else {
if((tmpFillStrokeElems[0].tagName === "linearGradient" || tmpFillStrokeElems[0].tagName === "radialGradient") && tmpFillStrokeElems[0].getAttribute('gradientUnits') === 'userSpaceOnUse') {
fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + tmpFillStrokeElems[0].id + ')"],[stroke="url(#' + tmpFillStrokeElems[0].id + ')"]');
} else {
return;
}
}
}
// get object's bounding box
const bb = utilsGetBBox(fillStrokeElems[0]);
// This will occur if the element is inside a <defs> or a <symbol>,
// in which we shouldn't need to convert anyway.
if (!bb) { return; }
if (grad.tagName === 'linearGradient') {
const gCoords = {
x1: grad.getAttribute('x1'),