[英]Drawing SVG using Javascript
I have the following snippet of code: 我有以下代码片段:
draw: function drawFn ($dial) {
var width = $dial.width(),
height = $dial.height(),
$svg = $('<svg />').attr({
"width": width,
"height": height
}),
circle = $('<circle />').attr({
"cx": 0,
"cy": 0,
"r": width / 2,
"fill": "red"
});
$svg.append(circle);
$dial.append($svg);
}
$dial
is a jQuery wrapped <div>
element with a width and height. $dial
是一个带有宽度和高度的jQuery包装<div>
元素。
The <svg>
and <circle>
elements are both appended to the <div>
but they have no visible size. <svg>
和<circle>
元素都附加到<div>
但它们没有可见的大小。 What am I missing? 我错过了什么?
Fiddle here: http://jsfiddle.net/alexcoady/pLvAw/2/ 在这里小提琴: http : //jsfiddle.net/alexcoady/pLvAw/2/
It is for the reason svillamayor links to. 这是svillamayor链接到的原因。 You can't make svg straight from jquery, so you append the actual element in and wrap that in jquery to modify it.
你不能直接从jquery生成svg,所以你追加实际的元素并将其包装在jquery中来修改它。
I made a fiddle to show how you'd kinda do it by wrapping things: 我做了一个小提琴,通过包装东西来展示你是如何做到的:
http://jsfiddle.net/vEEZT/4/ http://jsfiddle.net/vEEZT/4/
The real trick is: 真正的诀窍是:
var $circle = $(document.createElementNS(NS, "circle"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.