Doesn’t work with SVG?

  • alkhalaf

    (@alkhalaf)


    6 years, 7 months ago

    I’m trying to make it work from links originating from svg, either inline svg’s or loading from svg file. But neither is working.

    I’m using the latest version (1.6.6) on the latest version of WordPress with WPBakery Page Builder, the plugin works perfectly if triggered from a menu item or any other link, but not from svg. I tried adding the xlink:href to the path it self, to a dedicated anchor and also to add the ps2id class to the anchor, added the corresponded css selectors in ps2id settings also. Nothing works.

    I thought this might be because of how I embedded the svg through Mapplic plug in, but I tried without it, directly through a single image element or even a raw html element in both inline or linked svg file. Not a single method works.

    I looked into the FAQ and the documentation and nothing mention anything about usage in svg, the only thing mentioned is in the changelog that version 1.6.3 supports anchors inside svg, but nothing else…

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author malihu

    (@malihu)

    6 years, 7 months ago

    Can you post you site/page URL so I can check it?

    I’m posting an SVG example that works when tested: 

    <svg width="140" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<a href="#section-3" rel="m_PageScroll2id">
		<rect height="30" width="120" y="0" x="0" rx="15"/>
		<text fill="white" text-anchor="middle" y="21" x="60">SVG on MDN</text>
	</a>
</svg>
    Thread Starter alkhalaf

    (@alkhalaf)

    6 years, 7 months ago

    Hmmm, Here’s the catch:

    SVG doesn’t support the regular href=”” attribute, it must be xlink:href=””.

    I added it instead of href, and the css selector for it xlink\:href, and now the inspector says
    Uncaught Error: Syntax error, unrecognized expression: a[xlink\:href*=#]:not([xlink\:href=#]),a[href*=#]:not([href=#]):not([data-vc-tabs]):not([data-vc-accordion]),._ps2id,a[data-ps2id-api='true'][href*='#'],.ps2id > a[href*='#'],a.ps2id[href*='#']

    The css selector is wrong I don’t know why. maybe the new xlink:href I added there, I suppose I must escape the colon like xlink\:href but it doesn’t work, with or without it.

    But, I used href just to test it, without any success.

    http://almarina.net/alm-plans

    If you test the second menu item from left, you will see it working. But from the first svg map it doesn’t work.

    Plugin Author malihu

    (@malihu)

    6 years, 7 months ago

    Can you add the first svg map in your page like a normal SVG? Right now you have it as an embedded object. Can you add it as the other svg element in your page?

    Thread Starter alkhalaf

    (@alkhalaf)

    6 years, 7 months ago

    Yes it’s finally working now.

    Other SVG elements are put by a plugin to enable their interactivity, so the ps2id won’t be able to do it’s magic without deep programming (like using jQuery’s $.on function).

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Doesn’t work with SVG?’ is closed to new replies.

Tags