有没有办法使用 jQuery 添加区分大小写的属性？答案

【问题标题】：Is there a way to add a case sensitive attribute using jQuery?有没有办法使用 jQuery 添加区分大小写的属性？
【发布时间】：2010-08-17 21:32:48
【问题描述】：

我正在使用 jQuery 即时修改一些 svg ~~files~~ 数据...我需要做的一件事是修改“viewBox”属性。然而，当在下面的 sn-p 中使用 jQuery 时，它会在属性上执行 toLower() ，因此“viewBox”变为“viewbox”。通常我不会在意，但这似乎破坏了 svg 渲染（至少在 finder 和 Safari 中的 Mac OS X 上）。

有没有办法在 jQuery 中本地修改它（通过标志或其他东西），还是我必须在之后进行字符串替换？

var $svg = $('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>');
// do some work here
$svg.attr('viewBox', 0 + ' ' + 0 + ' ' + 288 + ' ' + 288);

【问题讨论】：

这可能不是您想要的，但是您是否考虑过使用 XSL 来转换您的文件？这是一种更常见的方法...

标签： jquery svg

【解决方案1】：

您可以使用 SVG DOM API 来设置 viewBox：

$svg.each(function(index,node){
    node.viewBox.baseVal.x = 0
    node.viewBox.baseVal.y = 0
    node.viewBox.baseVal.width = 288
    node.viewBox.baseVal.height = 288
})

更多信息可以在 SVG 规范中找到：http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

【讨论】：

我注意到 jquery 在显示来自选择器的元素时没有正确报告更新的 svg 属性值，但节点本身会反映更改。

【解决方案2】：

除非您想修改库本身，否则我看不出有任何方法可以避免进行字符串替换。

【讨论】：

这基本上是我解决这个问题所必须做的。

【解决方案3】：

如果你离开 jQuery 对象只是为了设置属性呢？例如

var $svg = $('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>');

$svg[0].setAttribute('viewBox', 0 + ' ' + 0 + ' ' + 288 + ' ' + 288);

注意：您可能还想查看这个 jQuery 插件：http://keith-wood.name/svg.html

【讨论】：