Svg(…) with a <mask> element inside

Kirby 3 Solved ✅
1

I’m working on a personal project for which different svg’s will be uploaded that would have to mask the parent div(has a background image).

Is it possible to edit the internals of the svg via the svg helper to wrap it’s internals inside a <mask> element?

I’ve been looking into php str_replace, but this becomes very messy. It would be nice if this could be achieved with the helper instead.

Any ideas?

2

No, the whole purpose of the svg() helper is to read/output the file, not to manipulate it.

You can create your own helper to move the logic out of the way. Don’t know if str_replace is your best bet or whether the DomDocument class would be the better option.

3

‘read/output’ makes sense indeed :slight_smile:

In the mean time I’ve found a solution creating the mask with plain inline html styles:

<div class="part" 
style="
background: url(<?= $image->material() ?>); 
mask-image: url(<?= $image->url() ?>);
-webkit-mask-image: url(<?= $image->url() ?>)"
 >

But I’d rather do it with a custom helper as you suggest. I’ll look into it and maybe go as far to explore how to make a plugin from it. I didn’t find a plugin that provides this customizability to change the internal markup of the svg.

Do you think this is a good idea? Never really build a plugin, so it would be my first experience with it. But I’m up to the challenge since I’m really invested in the svg format for this specific project.

4

You might have some luck with this plugin. GitHub - hananils/kirby-tree-methods: A Kirby 3 plugin providing field methods to filter and manipulate HTML output

Its for manipulating the generated HTML, and since inline SVG is part of an HTML page, i think it will do the job for you.

1 Like
5

You can also use Kirby’s Dom class to load the SVG file into a DOM object structure and manipulate it from there.