CODEWITHSUNDEEP
phpjquerysvg
Unskilled
Unskilled

Reputation: 39

Add target to SVG a tag

I am trying to add target="_blank" to my SVG <a/> tag but I can't figure out why my code isn't working.

<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
    function loadedSVG() {
        $('#svg1 a').attr('target', '_blank');
    }
</script>
<object id="svg1" data="SVG_File.svg" type="image/svg+xml" onload='loadedSVG()'>
    <a href="http://www.yahoo.com/">yahoo</a>
</object>

The code works on the Yahoo link but not on hrefs within the SVG file, anybody have any idee how I can fix this?

Upvotes: 1

Views: 130

Answers (2)

Alan Yong
Alan Yong

Reputation: 1033

You should put object tag in a tag

<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
    function loadedSVG() {
        $('#svg1 a').attr('target', '_blank');
    }
</script>
<a href="http://www.yahoo.com/">
   <object id="svg1" data="SVG_File.svg" type="image/svg+xml" onload='loadedSVG()'>
     yahoo
   </object>
</a>

hope that's help

Upvotes: 0

Florian
Florian

Reputation: 51

I think that the link must be outer of object tag

function loadedSVG() {
  $('#container a').attr('target', '_blank');
}
#container{
  position: relative;
  width: 150px;
  height: 150px;
}

a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
  color: white;
}

#svg1{
   width: 100%;
   height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="container">
    <a href="http://www.yahoo.com/">yahoo</a>
    <object id="svg1" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" type="image/svg+xml" onload='loadedSVG()'>
    </object>    
</div>

Regards

Upvotes: 1

Related Questions