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

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

谁能帮我

4

1 回答 1

1

这是一个快速的答案(27/05/13 更新:添加了 <script> 标签)

<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>
于 2013-05-26T06:56:12.943 回答