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()，可以选择通过覆盖jQuery如何确定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

当jQuery的attr没有时，为什么setAttribute工作

2 个答案: