maskWith quotation approach

[HarryFaulkner]

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.

svg.js/src/elements/Mask.js

Line 47 in 4524c20

return this.attr('mask', 'url("#' + masker.id() + '")')

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]

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]

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: #1278