为什么当 jQuery 的 attr 不起作用时 setAttribute 起作用

Question

我正在尝试根据鼠标位置动态旋转 SVG 中的渐变，除了这一行之外，一切正常。问题是我似乎无法让 jQuery attr 方法工作。 setAttribute 可以很好地替换属性 rotate(#,#,#) 内的 gradientTransform 但 attr 不能。我真正遇到问题的部分是我可以使用attr 更改其他属性（如小提琴中的第三个示例）。

http://jsfiddle.net/samt/8yUNL/

这个有效

mainLogoFill[0].setAttribute('gradientTransform', 'rotate(45,100,100)');

这个没有

mainLogoFill.attr('gradientTransform', 'rotate(90,100,100)');

这个把我扔了..为什么它有效？

mainLogoFill.attr('x1', '100');

Answer 1

jQuery 使用带有属性名称的 toLowerCase，因此它以 gradienttransform 而不是 gradientTransform 结尾，这是一个新属性，与您已有的属性不同，因此会出现问题。

attr() 方法是这样开始的

function (elem, name, value) {
    var hooks, ret, nType = elem.nodeType;

    // don't get/set attributes on text, comment and attribute nodes
    if (!elem || nType === 3 || nType === 8 || nType === 2) {
        return;
    }

    // Fallback to prop when attributes are not supported
    if (typeof elem.getAttribute === core_strundefined) {
        return jQuery.prop(elem, name, value);
    }

    // All attributes are lowercase
    // Grab necessary hook if one is defined
    if (nType !== 1 || !jQuery.isXMLDoc(elem)) {
        name = name.toLowerCase(); // this is the line where the name is lowercased
        hooks = jQuery.attrHooks[name] || (jQuery.expr.match.bool.test(name) ? boolHook : nodeHook);
    }

    if (value !== undefined) {

解决方法是改用 setAttribute。

Answer 2

虽然 SVG 基于 XML（因此使用区分大小写的属性名称），但此时 jQuery 的检测失败并将属性名称转换为小写。

如果您不喜欢到处使用.setAttribute()，另一种方法是通过覆盖它确定 XML 模式的方式来修补 jQuery：

jQuery.isXMLDoc = function(elem)
{
    return (elem.ownerDocument || elem).documentElement.nodeName !== "HTML" || 
        (elem.namespaceURI).indexOf('html') == -1;
}

上面的代码额外检查当前元素的命名空间中是否有术语"html"； SVG 的命名空间是 "http://www.w3.org/2000/svg"，所以 jQuery 不会改变你的属性名称的大小写。

Demo