25

我正在使用直接放入 HTML 文件的 SVG

<svg>
   Contents...
</svg>

使用 javascript/jQuery 我想向 SVG 添加一个属性

$("svg").attr("viewBox", "0 0 166 361");

这是运行上述脚本后修改后的 SVG

<svg viewbox="0 0 166 361">
   Contents...
</svg>

注意它把 viewbox 放在 viewBox 上。由于 viewbox（小写）没有做任何事情，我需要它是 viewBox（camelcase）

有任何想法吗？

** 更新 **

我运行了一个小测试，从服务器端渲染 viewBox 属性，然后运行上面的脚本。可以看到 1. 从服务端渲染的时候，没问题。2. jQuery 无法识别camelCase viewBox 属性并插入另一个全小写的属性。

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="332" 
     height="722" viewBox=" 0 0 100 100" viewbox="0 0 166 332">
...
</svg>
4

3 回答 3

24

我可能取决于您的编码文档类型。 XHTML 文档的所有 HTML 元素和属性名称必须使用小写。我不确定HTML。

更新 2

我能找到的唯一解决方案是使用：

$("svg")[0].setAttribute("viewBox", "0 0 166 361");

更新

我无法以任何理由解释它，我在自己的主机上进行了测试，因为 JsFiddle 总是使用 XHTML（嘘！）。在所有情况下它都是小写的，但它仍然是 FF、Chrome 和 IE9 中的 SVG 元素（我不知道它们是否有效，因为我害怕我不知道 SVG）。

火狐示例 铬示例 IE 示例

于 2012-04-30T20:53:17.480 回答
4

因为 html 不区分大小写并且 xhtml 标签和属性应该小写，所以 jQuery 将属性名称转换为小写。因为 xml 区分大小写，所以当嵌入式 xml 语言像 SVG 那样使用驼峰式属性名称时，这是一个问题。

您可以使用 jQuery 挂钩来处理您希望不转换大小写的属性名称。如果要设置 jQuery jQuery.attrHooks[attributename].set ，它将使用它来设置属性。当jQuery.attrHooks[attributename].get它尝试检索属性值时也是如此。例如：

['preserveAspectRatio', 'viewBox'].forEach(function(k) {
  $.attrHooks[k.toLowerCase()] = {
    set: function(el, value) {
      el.setAttribute(k, value);
      return true; // return true if it could handle it.
    },
    get: function(el) {
      return el.getAttribute(k);
    },
  };
});

现在 jQuery 将使用您的 setter/getter 来操作这些属性。

注意：el.attr('viewBox', null)会失败；你的钩子设置器不会被调用。相反，您应该使用 el.removeAttr('viewBox')。

于 2015-03-05T11:27:29.380 回答
2

http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs

jQuery 认识到他们 toLower 所有属性名称但不关心例外/删除这一行，因为与 SVG 相关的错误被忽略（在我看来 toLower 是多余的）。

于 2012-12-23T21:29:40.643 回答