Problem using stroke based mask using multiple time the same SVG file

Hi !

I want to mention a problem I've found using masks as paths.

In my project, I want to achieve a calligraphic effect. To be able to do that, I use a fill-based SVG as the base object then I apply a stroke based white mask on the object. With that, the desired effect is achieved.

However, if I call 2 times the file like that:

<div id="svg-a"></div>
<div id="svg-b"></div>

<script>
let vivusA = new Vivus("svg-a", {
  duration: 1000,
  type: "oneByOne",
  file: "./path/to/my-file.svg",
});
let vivusB = new Vivus("svg-b", {
  duration: 500,
  type: "oneByOne",
  file: "./path/to/my-file.svg",
});
</script>

then only vivusA is applied. The same append with inline <svg> tags but not with <object>.

The problem is due to the fact that the masks have their own ids. So when vivusA is executed, then the first mask, let say it's called "mask1", is executed in both "svg-a" and "svg-b". The problem doesn't append in <object> because it is sandboxed.

The solution I have is to duplicate the file and to change the ids in the second file.

Et voilà, I don't know if it is useful or not but at least the information is here if someone wants to use the same trick.

Have a nice day !