Can I pass wp permalinks to an svg file?

I’ve got an svg file for a hero image, and I want certain paths to be internal links. I’ve wrapped the paths in an anchor tag, and putting in static links works, but I’d like them to be dynamic so I can changed them in the wp admin. Is this possible? How can I send the permalink data to the svg file?

The bit of code below shows what I’ve got right now in my svg file…

<a href="/contact">
    <path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
    <path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
</a>

…but ideally it would look more like this :

<a href="<?php echo $hero_link['url'];?>">
    <path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
    <path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
</a>

Answer

You can code your SVG file giving your hyperlinks id values, for example:

<a id="contact-link" href="/contact">

You can load them into your web page with HTML like this. When you use <object> to load svg files, they are made accessible to Javascript in your page as if they were ordinary HTML. (Not so with <img>.)

<object id="svg-display"
        data="/my/svg/url.svg"
        width="300" height="300"
></object>

Write a bit of php to deliver the hyperlink value to your web page.

echo "<script>const svgContactUrl = {$hero_link['url']}</script>";

Then you can write some Javascript to alter the hyperlink.

/* Wait for the web page to load ...*/
document.addEventListener('DOMContentLoaded', function (event) {
    /* ... when it is loaded find the svg object ... */
    const svgDisplay = document.getElementById('svg-display')
    /* ... and wait for it to load ... */
    svgDisplay.addEventListener('load', function (event) {
        /* ... then find the hyperlink in the svg ... */
        const contactLink = svgDisplay.getElementById('contact-link')
        /* ... and set its URL. */
        contactLink.href = svgContactUrl
    })
})

This kind of thing is quite tricky to debug. (I didn’t debug it.) But it is the way you customize the contents of SVG files.

The good news is, once you get past all the fiddly event programming, it is robust, now that Internet Explorer is in the dustbin of history where it always belonged.

Advertisement

Answer