Embedded SVG mask not seeing resources folder

1

Hi there,
I may be doing something wrong here, but I’m trying to use an SVG mask embedded in an HTML element on the stage and, while it previews fine within Hype’s preview screen, as soon as it’s previewed in a browser, the SVG mask isn’t seen (instead it uses a missing image symbol as the mask). I’m using the following code embedded in the element:

<svg height="200px">
    <defs>
     <mask id="svgmask1">
            <image width="100%" height="100%" xlink:href="${resourcesFolderName}/5-1-saturn_mask.png"></image>
        </mask>
        </defs>
    <image mask="url(#svgmask1)" width="100%" height="100%" xlink:href="${resourcesFolderName}/5-1-saturn.png"></image>
</svg>

Inspecting the element using Chrome’s developer tools, the path to the image looks fine, but it doesn’t seem to render the image correctly.

Am I missing something obvious here?

Thanks

hype_svg_mask_test.zip (85.0 KB)

1 Like
2

The images you are referencing are being optimized by Hype and renamed, thus it is not found.

To solve, this, select the images in the Resource Library and uncheck “Automatically optimize when exporting”.

2 Likes
3

Jonathan - brilliant! Once again after-sales help is off the scale :slight_smile:

Thanks so much.

2 Likes