Question

<?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>

这是我的svg的代码，它是一个示例，我想更改href id

<use xlink:href="#rect1"

每当我在当前对象上小鸡时

如果我将id替换为

<use xlink:href="#rect2"

它将显示另一个rect，我想在运行时在浏览器中执行此操作，点击更改引用时的对象ID

任何人都可以帮助我

Answer 1

这是一个快速回答（更新于2013年5月27日：已添加＆lt; script＆gt;标记）

<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>

如何通过单击该对象将svg中的href链接替换为任何其他id

1 个答案: