我正在通过javascript创建SVG元素,它工作正常,但是当我创建一个文本svg元素并定义它的内容时,浏览器只是不渲染值,尽管我用firebug检查它时代码中的值.
代码是:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('width','187');
svg.setAttribute('height','234');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width','187');
rect.setAttribute('height','234');
rect.setAttribute('fill','#fff');
rect.setAttribute('stroke','#000');
rect.setAttribute('stroke-width','2');
rect.setAttribute('rx','7');
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', '#000');
text.textContent = '2';
svg.appendChild(rect);
svg.appendChild(text);
var wp = document.getElementById('wrapper');
wp.appendChild(svg);
Run Code Online (Sandbox Code Playgroud)
这里是jsfiddle链接http://jsfiddle.net/sAhyC/ 如果您检查svg,您将看到文本元素的值,但浏览器不会呈现它.
谢谢
有没有一种简单的方法可以将字符串转换为普通 javascript 中的 svg 元素(无库)?喜欢:
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';
//convert this string to a DOM element
Run Code Online (Sandbox Code Playgroud)
更新
我通过使用 DOMParser API https://developer.mozilla.org/en-US/docs/Web/API/DOMParser解决了这个问题
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>';
function createSVGElement(data) {
var parser = new DOMParser();
var doc = parser.parseFromString(data, "image/svg+xml");
document.body.appendChild(doc.lastChild);
}
Run Code Online (Sandbox Code Playgroud)
它工作得非常好,而且我不需要使用 div。
这两个代码有什么区别,我应该使用哪一个?
function Test() {}
Test.method = function() {};
Run Code Online (Sandbox Code Playgroud)
使用Prototype:
function Test() {}
Test.prototype.method = function() {};
Run Code Online (Sandbox Code Playgroud) 当我DELETE FROM users WHERE id='some_id'在beta_keys表上运行记录时,不会被删除。
beta_keys表:
CREATE TABLE beta_keys (
id serial PRIMARY KEY,
key VARCHAR(60) UNIQUE NOT NULL,
created_at TIMESTAMP NOT NULL,
updated_at TIMESTAMP
);
Run Code Online (Sandbox Code Playgroud)
用户表:
CREATE TABLE users (
id serial PRIMARY KEY,
email VARCHAR (256) UNIQUE NOT NULL,
password VARCHAR (60) NOT NULL,
beta_key_id INTEGER,
created_at TIMESTAMP NOT NULL,
updated_at TIMESTAMP,
CONSTRAINT users_beta_key_id_fkey FOREIGN KEY (beta_key_id)
REFERENCES beta_keys (id) MATCH SIMPLE
ON DELETE CASCADE
);
Run Code Online (Sandbox Code Playgroud) 我是一个jquery新手,我用jquery创建框,然后"删除"它们.但是我想使用相同的代码来删除已创建元素范围内的框以及已创建元素的范围.
HTML:
<button id="create">Cria</button>
<div id="main">
<div class="box">
<a class="del-btn" href="#">Delete</a>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
JS:
var box = {
create: function() {
var box = $('<div class="box">');
var delBtn = $('<a class="del-btn" href="#">Delete</a>');
box.appendTo('#main');
delBtn.appendTo(box);
},
destroy: function(elem) {
elem.fadeOut();
}
}
function deleteBox () {
}
$(function() {
$('#create').click(function() {
box.create();
});
$('.del-btn').click(function() {
var elem = $(this).parent();
box.destroy(elem);
return false;
});
});
Run Code Online (Sandbox Code Playgroud)
如果我将delete事件放在create click事件中,我就可以删除动态创建的元素.如果我把它放在外面,那么我可以删除HTML中的元素.我知道这是一个简单的问题,但我无法弄清楚如何解决它.谢谢
在此示例代码中:
(function(){
var obj = function() {
};
obj.prototype.hello = function(){
console.log('Hello World!');
};
})();
Run Code Online (Sandbox Code Playgroud)
我看到很多图书馆在做这件事.为什么将代码包装在立即调用函数表达式(IIFE)中是一种好习惯?我如何在外面访问这个对象,就像jquery一样?
因为如果我做这样的事情:
var test = new obj();
Run Code Online (Sandbox Code Playgroud)
浏览器显示obj未定义.
假设我有以下网格,网格的每个单元格都有一个映射到一维数组的索引。
0, 1, 2
3, 4, 5,
6, 7, 8
Run Code Online (Sandbox Code Playgroud)
我可以用一维数组来表示它,例如:[0, 1, 2, 3, 4, 5, 6, 7, 8]
我想知道一种将二维坐标映射(3,1)到数组中索引的简单方法,在本例中,是2.
经过大量研究后,我发现很多人提出了这个方程:index = x + (y * width),但它在我的测试中似乎不起作用。
例如(1, 1),对于 ,结果将是index = 1 + (1 * 3) = 4,而对于 ,结果(3, 1)将是index = 3 + (1 * 3) = 6,这对我来说没有任何意义。
是否可以通过简单的方式实现这一目标?或者我需要使用像 for 这样的迭代器?