javascript - 无法访问 svg 路径属性

Question

我正在使用 html5、js 和 css3。

我有以下代码：

HTML

<object id="bottom" data="img/model/skirt.svg"
title="bottom" type="image/svg+xml" width="325"
height="500"> </object>

JS

var b = document.getElementById("bottom");
b = b.getSVGDocument().getElementById("here");
alert(b);

，这给了我“对象SVGPathElement”。

但是当我尝试访问填充属性时，我收到一条“未定义”消息。 alert(b.fill);例如。

fill 属性肯定是在 svg 文件中设置的。我显然错过了一些东西。任何指针表示赞赏。

Answer 1

svgEl.setAttribute(name, value)您必须使用和访问 SVG 属性svgEl.getAttribute(name)。

没有访问诸如HTMLElement.

但如果你真的想要，你可以扩展SVGElement.prototype：

Object.defineProperties(SVGElement.prototype, {
  fill: {
    get: function() {
      return this.getAttribute('fill');
    },
    set: function(value) {
      return this.setAttribute('fill', value);
    }
  }
});