jquery turn a href to xlink:href

Question

I am trying to implement the following rewrite of links inside svg:

<a href="/node/1">link title</a>

to

<a xlink:href="/node/1">link title</a>

As these kind of links will not work on safari without the XLINK part.

I tried altering drupal views that generates these links for my site, but the system for security reasons, omits all attributes and links get printed as href only.

My only option is to alter the result with jquery but so far I have not had any success.

the [change is easy](https://jsbin.com/rowedej/1/edit?html,output) - you can right-click in the text in output - [output image](https://s6.postimg.cc/j2xxs6n8v/screenshot_3.png) - but I wonder if it has to be there when the page is rendered. — balexandre, May 02 '18 at 17:28

score 0 · Answer 1 · answered May 02 '18 at 17:34

0

Just loop round the a elements and change them. It's easier in plain javascript than jQuery.

var elements = document.getElementsByTagName("a");
for (var i = 0; i < elements.length; i++) {
    elements[i].setAttributeNS("http://www.w3.org/1999/xlink", "href", elements[i].href);
}

<svg>
    <a href="/node/1"><text y="20">link title</text></a>
</svg>

answered May 02 '18 at 17:34

Robert Longson

118,664
26
252
242

thank you a lot g33k. However, i want the link to be updated dynamically and not manually for each anchor. lets say the list has 6-50 links that are generated by the CMS. each with a different path. how can i go about looping and putting the correct value from HREF to XLINK:HREF? – user3716886 May 03 '18 at 07:44
Why do you think my code doesn't do that? It does exactly the same thing as the other slightly later answer you've accepted except that it doesn't use jQuery. Feel free to leave the other answer as accepted, I'm not complaining about that here. – Robert Longson May 04 '18 at 04:20
Sorry Robert. Maybe i have not understood that right and i understand jquery a bit better than plain javascript. It seemed to me that i needed to manually declare the path for each link. I really appriciate you taking the time to answer it for me. I am still learning my way through and my lack of knowledge should not discourage you from sharing and helping :) Best regards my friend. – user3716886 May 04 '18 at 07:12

score 0 · Accepted Answer · answered May 02 '18 at 19:01

Use function .attr(), then you will be able to add any kind of attributes

$(function(){
  $("body a").each(function(){
    var aHref = $(this).attr("href");
    $(this).attr("xlink:href", aHref);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/node/1">link title</a>
<a href="/node/1">link title</a>
<a href="/node/1">link title</a>

jquery turn a href to xlink:href

2 Answers2