CODEWITHSUNDEEP
svg
user2420561
user2420561

Reputation: 21

how to replace an href link in svg with any other id , by clicking on that object

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1    /DTD/svg11-flat-20030114.dtd">
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink">
<defs >
<symbol overflow="visible" id="rect1">
<rect x="142" y="67" width="81" height="67" fill="#003399" stroke="none" stroke-    opacity="0" xmlns="http://www.w3.org/2000/svg" />
</symbol>
</defs>
<defs >
<symbol overflow="visible" id="rect2">
<rect x="142" y="67" width="81" height="607" fill="#003399" stroke="none" stroke-    opacity="0" xmlns="http://www.w3.org/2000/svg" />
</symbol>
</defs>

<use xlink:href="#rect1" xmlns:xlink="http://www.w3.org/1999/xlink"    xmlns="http://www.w3.org/2000/svg">
<animateTransform attributeName="transform" begin="0" dur="0.5" fill="freeze" additive="sum" from="-65 7" to="0 0" type="translate" />
<animateTransform attributeName="transform" begin="0.5" dur="0" fill="freeze" additive="sum" from="21 2" to="21 2" type="translate"  />
</use>
<circle id="circle" cx="284.5" cy="142.5" r="56.5" fill="#000000" stroke="none" stroke-opacity="0" transform="matrix(1,0,0,1,-1,-34)" xmlns="http://www.w3.org/2000/svg" />
</svg>

this is the code of my svg , it is a sample , i want to change the href id

<use xlink:href="#rect1"

whenever i will chick on the current object

if i will replace the id to 

<use xlink:href="#rect2"

it will show another rect, i want to do it at runtime in the browser, on click change the object id at reference

can anyone help me

Upvotes: 2

Views: 549

Answers (1)

Alvin K.
Alvin K.

Reputation: 4379

Here's a quick answer (updated 27/05/13: added <script> tag)

<use id="myImage_ID" xlink:href="#rect1" onclick="myFunc()" .... >

<script> <![CDATA[
  function myFunc() {
    var svgImg = document.getElementById('myImage_ID')
    svgImg.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href" , '#rect2')
  }
]]> </script>

Upvotes: 1

Related Questions