修改svg元素内的图像href属性

Question

在函数内部我有一个svg对象，当我控制日志时它看起来像这样：

<svg height="100" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" 
     style="overflow: hidden; position: relative;">

  <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
  <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
  <path fill="#000000" stroke="#000000" d="M0,0L12,12L12,-12L0,0" transform="matrix(1,0,0,1,0,50)" 
     opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;">
  </path>
  <rect x="0" y="10" width="30" height="80" r="0" rx="0" ry="0" 
    fill="#000000" stroke="#000" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect>
  <image x="134" y="10" width="30" height="80" preserveAspectRatio="none" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="/static/img/pads/numberline/symbols/leftParen.png" 
    style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
  </image>
</svg>

现在我需要更改svg元素内图像的href。 我到目前为止所做的是设置宽度svgObject.setAttribute('width', 1000);

但是如何更改和选择图像元素href属性？

Answer 1

使用setAttributeNS在xlink命名空间中设置xlink：href属性。

现在有些浏览器（但不是Safari或IE）会让你在null命名空间中设置href属性（你可以使用setAttribute），并优先使用xlink：href，但直到Safari赶上你＆＃ 39;最好坚持使用xlink：href

＆＃13;

＆＃13;

<svg height="100" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg">

  <image x="134" y="10" width="100" height="100"     xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="https://bellard.org/bpg/2.png" onclick="this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://pngimg.com/uploads/polar_bear/polar_bear_PNG23514.png')">
  </image>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试querySelectorAll。它返回一个元素列表，然后你必须选择列表的第一个项目（[0]）。

document.querySelectorAll("svg image")[0].setAttribute("xlink:href", "myImage.jpg");

Fiddle

结果：