search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
10.95k stars 1.07k forks source link

maskWith quotation approach #1277

Closed HarryFaulkner closed 10 months ago

HarryFaulkner commented 1 year ago

Not sure if this is a bug or something to do with the SVG versioning... but for anyone experiencing issues importing masked SVG's into the applications I mention below, this is likely your issue.

When using the .maskWith() command, the mask is double quoted:

<g> mask="url("#SvgjsMask1002")" </g>

This approach works fine in the browser and most places. But when downloading the SVG and importing to something like Adobe illustrator or Inkscape it fails to render the mask.

The following line, wraps the mask in single quotations, and a supplemental double quotation for the internal #id.

https://github.com/svgdotjs/svg.js/blob/4524c20b48abe08e69c25a7382a289592d147496/src/elements/Mask.js#L47

I've adjusted my local version to the following (which fixes the issue for me): return this.attr('mask', 'url(#' + masker.id() + ')');

I don't know a great deal about the SVG versioning (changes to syntax that may have happened over time), this may be correct for a given version. The current documentation seems to suggest double quotes are not required: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

If this is intended behaviour then of course feel free to close this.

Fuzzyma commented 1 year ago

To me this sounds like a bug in the parser of Adobe or Inkscape - or its not allowed from the standard and the browser still works.

Nevertheless, yes, we should use single quotes if they get around that issue

HarryFaulkner commented 1 year ago

To me this sounds like a bug in the parser of Adobe or Inkscape - or its not allowed from the standard and the browser still works.

Nevertheless, yes, we should use single quotes if they get around that issue

Agreed, dam illustrator, they should be able to at least handle what a measly browser can 😄

PR: https://github.com/svgdotjs/svg.js/pull/1278