无法访问svg路径属性

我有以下代码：

HTML

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

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

，这给了我 “对象SVGPathElement”。

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

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

来源

2012-12-03 Matt Stevens

你怎么知道那个特定元素的填充属性设置？ –

我在所讨论的路径元素上设置了id =“here”，它在该svg文件中是唯一的id，在该路径元素中填充=“＃666666”。这是一个很好的问题，但我彻底检查了它:-) –

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

没有访问HTMLElement等属性的捷径。

但如果你真的愿意，你可以扩展SVGElement.prototype：

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

来源

2012-12-03 03:46:05 xiaoyi

:-) spot on，that works。谢谢。 –

对于属性（如'fill'），也可以使用CSS OM，例如'elm.style.fill'（如果填充是内联样式）或'window.getComputedStyle' - 请参见http：// www。 w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle。 –

@ErikDahlström很好的电话。 – xiaoyi

无法访问svg路径属性

回答

相关问题