[Resolved] Using smooth-scroll for a link inside svg

[Marc]

Hey,

I am trying to use smooth scroll for a link inside a svg. But it doesn’t seem to work.
I tried smooth-scroll with a regular link and it is working.

Here is my simplified code:

<svg>
<a xlink:href="#casing" class="smooth-scroll"><polygon points="35,407,376,406,378,350,350,298,355,21,63,22,65,295,33,347"/></a>
</svg>

I also tried to apply a filter. But if I understood correctly this should do the same as if I add the class manually, anyway.

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[xlink:href*="#"]';
  
  return $elements;
} );

Any ideas?

[David]

Hi there,

what happens if you just use the normal wild card filter here:

https://docs.generatepress.com/article/generate_smooth_scroll_elements/

[Marc]

Hey David,

tried that, too. Unfortunately with no effect.

[David]

Would you be able to share a link to the Site where we can see the issue?
You can edit your original topic and use the Site URL field to share it privately.

[Marc]

Done, hope you can see my additional comment to the url

right now I have the filter deactivated and the smooth-scroll class hardcoded

[Tom]

I’m not sure if our smooth scroll script supports that, unfortunately. It’s not possible to put the URL around the entire SVG?

[Marc]

Unfortunately it is not. Different parts in the svg are linked to different anchors.

[Tom]

That sounds like broken HTML. Can you show me the exact HTML you’re using? Are you using Gutenberg?

[Marc]

There are multiple polygons in the svg, which are linked to the anchors.

The url is in the first post, I tried to add a comment. I think it was added to the url with %20s. The site is on a development server. So you need to add an entry to your hosts file to see it.

And yes I am using Gutenberg. An html block.

[Tom]

You may need to use a plugin like this: https://wordpress.org/plugins/page-scroll-to-id/

You will need to tweak it though, as this kind of thing isn’t supported by default: https://wordpress.org/support/topic/not-working-with-link-inside-svg/

Let me know 🙂

[Marc]

Hey Tom,

thanks for the help, got it to work with the plugin.

This one really helped:

You will need to tweak it though, as this kind of thing isn’t supported by default: https://wordpress.org/support/topic/not-working-with-link-inside-svg/

Just had to change
$(this).attr("href")
to
$(this).attr("xlink:href")

[Tom]

Awesome, happy I could help 🙂

[Marc]

Thanks again!

a little update:
if I use
<a href="#casing"><polygon points"1, 2, 3, 4></polygon></a>
the plugin even works out of the box. Without the js in the article linked.

[Tom]

Cool! Thanks for the update 🙂

[Author]

Posts