CODEWITHSUNDEEP
htmlsvgxlink
user2340571
user2340571

Reputation: 1

SVG XLink Issue - Not working

<div data-role="content">
<div id="skeletonsmall">
<center>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="262px" height="644px" viewBox="128 65.25 262 644" enable-background="new 128 65.25 262 644" xml:space="preserve">

<a xlink:href="#skull">
    <path id="skull" opacity="0.5" fill="#5CCAE8" enable-background="new    " d="M237.026 122.5 c1.92 7.2 3.3 7.6 3 10.028c-0.341 2.388-0.375 10.5 10.1 11.58c10.522 1.1 22.9 1.6 26.282-5.134 c0 0 1.338-8.834 2.817-10.267c1.479-1.433 0.765-4.775 1.958-6.208c1.192-1.433 3.485-23.877-1.958-32.233 c-5.444-8.357-7.435-12.655-21.124-12.655c-13.69 0-19.059 8.118-20.193 10.028c-1.137 1.91-1.455 5.253-2.251 6.5 c-0.795 1.273-1.113 6.048-1.272 7.958c-0.16 1.9 0 14.5 0.8 16.873C236.002 121.4 237 122.5 237 122.477z"/></a>
<g id="humerus">
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new    " d="M190.635 197.309c-2.093-5.987-1.962-8.47-0.813-10.126 c1.147-1.655 0.957-1.908 3.312-2.478c2.356-0.57 3.695-1.97 5.67-1.458c1.973 0.5 3.3 0.7 5.6 3.8 c2.289 3.1 0.8 5.3 0.8 5.35s-2.737 0.059-3.824 2.86c-1.086 2.8-2.602 43.292-3.114 45.3 c-0.512 1.973-3.397 17.25-3.02 20.943c0.378 3.7 4.7 19.6 4.8 21.845c0.124 2.3 1.5 5.67-3.638 6.3 c0 0 0.7 2.516-1.503 2.243c-2.192-0.273-4.356-1.041-6.52-1.808c-2.163-0.767-7.004-0.327-6.808-3.256 c0.194-2.929-0.565-5.54 2.876-8.911c3.442-3.371 5.869-32.016 6.592-37.428S190.635 197.3 190.6 197.309z"/>
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new    " d="M326.388 196.912c2.059-5.999 1.914-8.481 0.758-10.129 c-1.158-1.647-0.97-1.903-3.329-2.46c-2.359-0.556-3.706-1.948-5.678-1.424c-1.97 0.524-3.307 0.724-5.577 3.8 c-2.27 3.072-0.788 5.354-0.788 5.354s2.738 0 3.8 2.838c1.102 2.8 2.9 43.3 3.4 45.2 c0.524 2 3.5 17.2 3.1 20.926c-0.356 3.697-4.573 19.58-4.686 21.873c-0.111 2.293-1.424 5.7 3.7 6.3 c0 0-0.675 2.5 1.5 2.234c2.191-0.286 4.35-1.065 6.511-1.843c2.156-0.781 7.001-0.369 6.79-3.296 c-0.213-2.927 0.533-5.542-2.929-8.895c-3.462-3.35-6.054-31.981-6.808-37.389C325.444 234.6 326.4 196.9 326.4 196.912z"/>
 </g>

I can't seem to figure out why my code isn't working! I'm trying to use xlink to let my path (id skull) lead to the skull page. I'm sure this is some moronic coding error I'm making, but PLEASE HELP!

Upvotes: 0

Views: 1597

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

Your path has id="skull" and you link to it, in other words: if you click the link you just go to where you already are. Try replacing xlink:href="#skull" with e.g xlink:href="http://example.com" to test.

In general, it's not a good idea to have several elements with the same id in the same document.

Upvotes: 1

Related Questions