Question

我正在使用jQuery来动态修改一些svg 文件数据......我需要做的一件事就是修改“viewBox”属性。但是，当在下面的代码片段中使用jQuery时，它在属性上执行toLower（），因此“viewBox”变为“viewbox”。通常我不在乎，但这似乎打破了svg渲染（至少在Mac OS X的发现者和Safari中）。

有没有办法在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);

Answer 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

Answer 2

除非您想修改库本身，否则我认为您无法避免替换字符串。

Answer 3

如果你因为设置属性而退出jQuery对象呢？ e.g。

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

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

3 个答案: