我正在使用直接放入HTML文件的SVG
<svg>
Contents...
</svg>
Run Code Online (Sandbox Code Playgroud)
使用javascript/jQuery我想向SVG添加一个属性
$("svg").attr("viewBox", "0 0 166 361");
Run Code Online (Sandbox Code Playgroud)
以下是运行上述脚本后修改的SVG
<svg viewbox="0 0 166 361">
Contents...
</svg>
Run Code Online (Sandbox Code Playgroud)
注意它放置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>
Run Code Online (Sandbox Code Playgroud) 什么是jQuery for Document.createElementNS()?
function emleGraphicToSvg(aGraphicNode) {
var lu = function luf(aPrefix){
switch (aPrefix){
case 'xhtml': return 'http://www.w3.org/1999/xhtml';
case 'math': return 'http://www.w3.org/1998/Math/MathML';
case 'svg': return 'http://www.w3.org/2000/svg';
}
return '';
};
var svg = document.evaluate("svg:svg",
aGraphicNode, lu, XPathResult.FIRST_ORDERED_NODE_TYPE, null).
singleNodeValue;
$(svg).children().remove();
rect = document.createElementNS(lu('svg'), "rect");
rect.setAttribute("x", "35");
rect.setAttribute("y", "25");
rect.setAttribute("width", "200");
rect.setAttribute("height", "50");
rect.setAttribute("class", "emleGraphicOutline");
svg.appendChild(rect);
}
Run Code Online (Sandbox Code Playgroud)
该代码是Emle的简化片段- 电子数学实验室设备 JavaScript文件emle_lab.js.
Look-Up-Function luf()将完整引用映射到XPath字符串中的命名空间的缩短名称createElementNS().现有svg:svg的位置,删除并替换为新的矩形.
我的<svg>页面上有一个元素,并希望为它提供一个viewBox属性.当我用jQuery尝试这个时,就像这样:
$('svg').attr('viewBox', '0 0 800 400');
Run Code Online (Sandbox Code Playgroud)
它几乎可以工作,但它给元素一个"view b ox"属性(注意小写'b').这个属性要求驼峰工作,至少在我测试它的Chrome中.有没有解决方法?
我试图用AngularJS渲染一些SVG,但我无法动态更改svg元素的视图框.
Angular呈现"viewbox"属性,但浏览器需要"viewBox"属性.结果是:
<svg height="151px" width="1366px" viewBox="{{ mapViewbox }}" viewbox="-183 425 1366 151">
Run Code Online (Sandbox Code Playgroud)
我怎样才能得到我期望的结果:
<svg height="151px" width="1366px" viewBox="-183 425 1366 151">
Run Code Online (Sandbox Code Playgroud)
谢谢.
是的,也有类似的问题,但是它们与jquery一样添加小写字母属性,如下所示:jQuery中的attr()是否强制小写字母?
但是我有不同的情况。这是我的HTML5代码段:
<tr class='projectRow' data-projectId='34'>
Run Code Online (Sandbox Code Playgroud)
请注意,这是camelCase。现在,此代码不起作用:
//"this" points to a child element
$id = $(this).closest('.projectRow').data('projectId');//undefined
Run Code Online (Sandbox Code Playgroud)
但是,如果我将其小写:
$(this).closest('.projectRow').data('projectid');
Run Code Online (Sandbox Code Playgroud)
有用。
当我查看源代码时,它显然是“ projectId”(camelCase),但是在chrome->开发工具->元素中时,则是“ projectid”(小写)o_O
难怪jQuery无法获得此值,但是Chrome为什么要这样做呢?我之前做过数百次类似的事情,虽然在“ project-id”中使用了-,但是经过了多年的Web应用程序开发,我发现了类似o_O的东西。