Archived topic
Using smooth-scroll for a link inside svg
13 replies · Started by Marc on May 24, 2019
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?
Hi there,
what happens if you just use the normal wild card filter here:
https://docs.generatepress.com/article/generate_smooth_scroll_elements/
Hey David,
tried that, too. Unfortunately with no effect.
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.
Done, hope you can see my additional comment to the url
right now I have the filter deactivated and the smooth-scroll class hardcoded
I'm not sure if our smooth scroll script supports that, unfortunately. It's not possible to put the URL around the entire SVG?
Unfortunately it is not. Different parts in the svg are linked to different anchors.
That sounds like broken HTML. Can you show me the exact HTML you're using? Are you using Gutenberg?
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.
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 :)
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")
Awesome, happy I could help :)
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.
Cool! Thanks for the update :)
