javascript void 0+SVG

来源：蜘蛛抓取(WebSpider) 时间：2015-02-15 21:18 标签： javascript
javascript+SVG画饼图将26个英文字母分成6组，运用javascript+SVG画出一个英文单词中各组中含有字母的饼图，具体要求如下图，分不是问题，请各位大哥帮忙，最好有注解。_百度作业帮
javascript+SVG画饼图将26个英文字母分成6组，运用javascript+SVG画出一个英文单词中各组中含有字母的饼图，具体要求如下图，分不是问题，请各位大哥帮忙，最好有注解。
将26个英文字母分成6组，运用javascript+SVG画出一个英文单词中各组中含有字母的饼图，具体要求如下图，分不是问题，请各位大哥帮忙，最好有注解。
createPieChart = function(document){\x09var NewSVGElement = function(Q,A)//生成SVG元素\x09{\x09\x09var F;\x09\x09Q = 'string' === typeof Q ? document.createElementNS('http' + '://www.w3.org/2000/svg',Q) : Q\x09\x09for (F in A) F.indexOf('xlink:') ?\x09\x09\x09Q.setAttribute(F,A[F]) ://不是xlink命名空间的属性\x09\x09\x09Q.setAttributeNS('http' + '://www.w3.org/1999/xlink',F.substr(6),A[F])//是xlink命名空间的属性\x09\x09return Q\x09},Group = {},T = ['ABCD','EFGH','IJKL','MNOP','QRSTU','VWXYZ'],F;\x09for (F = T.F--;)//向Group中初始化bins的数据\x09\x09for (;T[F];T[F] = T[F].substr(1))\x09\x09\x09Group[T[F].charAt(0)] = F\x09return function(SVG,Q)\x09{\x09\x09var\x09Count = Array(6),//存放bins计数\x09\x09\x09G,//\x09\x09\x09Radius = SVG.getAttribute('height') / 2,//存放半径\x09\x09\x09Length,//存放字符长度\x09\x09\x09R = 0,//存储当前角度\x09\x09\x09S = Math.sin,\x09\x09\x09C = Math.cos,//单纯的做个本地副本, 益处是角度计算多的时候方便\x09\x09\x09X,Y,//坐标计算缓存, 用於提高效能\x09\x09\x09F;//临时变量|计数器变量\x09\x09Q = Q.toUpperCase().split('')//转化成大写後单字分隔\x09\x09Length = Q.length\x09\x09for (;Q.Q.shift())//bins计数\x09\x09{\x09\x09\x09F = Group[Q[0]]\x09\x09\x09Count[F] = (Count[F] || 0) + 1\x09\x09}\x09\x09SVG.appendChild(G = NewSVGElement('g',\x09\x09{\x09\x09\x09transform : 'translate(' + Radius + ' ' + Radius + ')',//通过坐标变换将绘制设置为原点在 !画布中心! , 向右为x增, 向下为y增\x09\x09\x09style : 'fill:stroke:black'//默认填充样式\x09\x09}))\x09\x09X = Radius\x09\x09Y = 0\x09\x09for (F = 0;F < Count.++F)\x09\x09{\x09\x09\x09Count[F] && (R += 2 * Math.PI * Count[F] / Length)//模拟旋转\x09\x09\x09G.appendChild(NewSVGElement('path',\x09\x09\x09{\x09\x09\x09\x09d : 'M0 0 ' + X + ' ' + Y + 'A' + Radius + ' ' + Radius + ' 0 0 1 ' + (X = Radius * C(R)) + ' ' + (Y = Radius * S(R))\x09\x09\x09\x09//A指令的用法一句两句说不清楚, 还是看文档吧\x09\x09\x09}))\x09\x09}\x09\x09return SVG\x09}}(document)小妹跪求javascript+svg的text標籤顯示的程式片段問題- 藍色小舖 BlueShop
台灣最大程式設計社群網站
會員總數：232645
討論主題：179004
歡迎您免費加入會員
討論區選單
行動裝置開發
多媒體 / 網管
&& 小妹跪求javascript+svg的text標籤顯示的程式片段問題
小妹跪求javascript+svg的text標籤顯示的程式片段問題
價值 : 10 QP&&點閱數:1447 回應數:8
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
因為我正在寫關於一個表單讓使用者輸入關鍵字後，能送到以下程式。然後用svg 文字的方式顯現出來以下程式，我是命名為test5.asp，因為我需要讀取xml檔，所以我必需要用&% @language=javascript%&方式寫。但在下面其中一行「document.write(title1)」。為什麼我就是無法印出來呢它會說title1沒有定義。我一開始不是有寫接收上一個表單欄位傳過來的值嗎?如果把那行寫在script標籤外面用&% Response.write(title)%&就可以顯現出來。不知道為什麼~懇請各位前輩幫忙另外，我要怎麼把接收表單過來的值放到svg text的標籤裡呢???讓他顯示我在表單打的值..那行我不會寫..公司要的。一個人寫到半夜在哭。唉~~&% @language=javascript %&&% var title1=Request.Form(&keyword&);%&&script language=&javascript&&function go() {
document.write(title1);
svgdoc=document.svgobject.getSVGDocument();//透過 document物件取得SVG的文件
textobj=svgdoc.getElementById(&text&);//利用ID 取得物件
textobj.setAttribute(&&,);//變更字接收過來表單值的屬性
}&/script&&embed name=&svgobject& src=&test5.svg& width=&300& height=&300&&&/embed&
本篇文章發表於 03:29
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
null_倒不用捐幣給我了~ 謝謝妳的心意~幫的上忙我就很高興啦~
本篇文章回覆於 16:17
--未登入的會員無法查看對方簽名檔--
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
謝謝NIL大哥，您說的效果，是我要的效果。是否可留您的msn呢??因為還有一些svg的問題想請教您~另外，我想捐贈給您p幣要怎麼用呢我第一次使用這網站，不太會~謝謝喔還有您說要存檔成utf-8真的是救了我。因為我的中文字可以顯現出來了...心裡真的很感謝...
本篇文章回覆於 16:09
--未登入的會員無法查看對方簽名檔--
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
對了, 提醒妳, 記得不管是 asp 還是 svg 檔都用 UTF-8 編碼存比較好喔.....因為 svg 印象中只吃 unicode
本篇文章回覆於 15:49
--未登入的會員無法查看對方簽名檔--
最有價值解答
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
以下, 供您參考囉.....半夜寫到哭喔, 太辛苦了, 加油喔~~~~歡迎再提出大家一起想~&% @language=javascript %&&% var title1=Request.Form(&keyword&);%&
&script language=&javascript&&
function go() {
svgdoc=document.svgobject.getSVGDocument();//透過 document物件取得SVG的文件
textobj=svgdoc.getElementById(&text1&);//利用ID 取得物件
textobj.firstChild.nodeValue = &&%=title1%&&;
&body onload=&go()&&
&embed name=&svgobject& src=&test5.svg& width=&300& height=&300&&
本篇文章回覆於 15:47
--未登入的會員無法查看對方簽名檔--
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
謝謝深潛大哥，我改成alert，svg的圖形能跑出來。但可能和我要的效果不一樣，我要的是document.write(&&%=title1%&&); 能夠將值列印在表單上，而不是用alert提示視窗那樣並且能夠用svg顯現出來...svg有一個text屬性.能將「這是顯現text圖形」改成「&%=title1%&」我把我原po文章那個test5.svg程式碼貼出來&svg xmlns=&http://www.w3.org/2000/svg& version=&1.1&&&circle id=&circle& cx=&100& cy=&100& r=&50& fill=&blue&/&&text id=&text1& x=&50& y=&100& style=&fill:red& font-size=&48&&這是顯現text圖形&/text&&/svg&
本篇文章回覆於 13:11
--未登入的會員無法查看對方簽名檔--
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
改這樣...試..document.write(title1);↓alert(&&%=title1%&&);重點..是在你是要給那個input的指定值位置..例如..&div id=&dp&&&/div&&script&getElementById(&dp&).innerHTML=&&%=title1%&&;&/script&或者是..&input type=&text& value=&&%=title1%&&&這個&%=title%&asp變數..是可以任意插在網頁的任何位置...
本篇文章回覆於 12:38
--未登入的會員無法查看對方簽名檔--
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
Bryan，為什麼我加了您打的這行後，可以正確顯示出來表單傳過來的值，但svg的圖就不見了呢!!謝謝
本篇文章回覆於 12:20
--未登入的會員無法查看對方簽名檔--
130){this.width=130;};if(this.height>130){this.height=130;}' onerror="this.src='/images/nophoto.gif'" onmousewheel="return ChgImgSize(this)" />
document.write(&&%=title1%&&);
本篇文章回覆於 08:07
--未登入的會員無法查看對方簽名檔--
如要回應,請先.通过javascript+svg实现实时时钟，效果如图：
下面是页面代码&html&
&title&时钟&/title&
&style type="text/css"&
height: 200
width: 200
font-family: "Comic Sans MS",
&svg id="svg"&&/svg&
(function clock(svg) {
var svg = document.getElementById(svg);
var weekday = ["日", "一", "二", "三", "四", "五", "六"];
var r = svg.clientWidth / 2;
var b = r / 50;
var d = new Date();
svg.appendChild(C("circle", { r: r, cx: r + b, cy: r + b, stroke: 'gray', 'stroke-width': b, fill: 'none' }));
svg.appendChild(C("rect", { x: r - r / 5 + b, y: r + r * 2 / 4 + b, width: r * 2 / 5, height: r / 4, stroke: 'gray', 'stroke-width': b / 3, fill: "none" }));
var cd = C("text", { x: r - r / 6, y: r + r * 2 / 3, fill: "blue", style: "font-size:" + (r / 10) + "" });
cd.textContent = d.getDate() + " 周" + weekday[d.getDay()];
svg.appendChild(cd);
for (var i = 0; i & 60; i++) {
var _b = !(i % 5) ? b : b / 2, _r = r - 2 *
var x1 = Math.sin(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - b - _b) + r + b,
y1 = Math.cos(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - b - _b) + r + b,
x2 = Math.sin(Math.PI - 2 * Math.PI / 360 * i * 6) * _r + r + b,
y2 = Math.cos(Math.PI - 2 * Math.PI / 360 * i * 6) * _r + r +
svg.appendChild(C("line", { x1: x1, x2: x2, y1: y1, y2: y2, stroke: 'black', 'stroke-width': _b }));
if (!(i % 5)) {
var x = Math.sin(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - 2 * b - r / 10) + r - b,
y = Math.cos(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - 2 * b - r / 10) + r + 3 *
var text = C("text", { x: x, y: y, fill: "blue", style: "font-size:" + (r / 10) + "" })
text.textContent = (i / 5 + 11) % 12 + 1;
svg.appendChild(text);
var hour = C("line", { stroke: 'red', 'stroke-width': 3 * b / 2 }),
minute = C("line", { stroke: 'green', 'stroke-width': b }),
second = C("line", { stroke: 'blue', 'stroke-width': b / 2 });
svg.appendChild(hour),
svg.appendChild(C("circle", { r: 3 * b / 2, cx: r + b, cy: r + b, 'stroke-width': 0, fill: 'red' }))
svg.appendChild(minute),
svg.appendChild(C("circle", { r: b, cx: r + b, cy: r + b, 'stroke-width': 0, fill: 'green' }))
svg.appendChild(second),
svg.appendChild(C("circle", { r: b / 2, cx: r + b, cy: r + b, 'stroke-width': 0, fill: 'blue' }));
setInterval(R, 1000);
function R() {
var h = new Date().getHours(),//get the current hour
m = new Date().getMinutes(),
//get the current minute
s = new Date().getSeconds();//get the current second
var hr = h * 30 + (m / 2),
mr = m * 6, //degrees to rotate the minute hand
sr = s * 6;//for the rotation to reach 360 degrees
A(hour, hr, -2*b, r / 2), A(minute, mr, -3*b, 2 * r / 3), A(second, sr, -4*b, r - 4 * b - r / 10);
function C(tagName, options) {
options = options || {};
var ns = document.createElementNS("http://www.w3.org/2000/svg", tagName);
for (var key in options) ns.setAttribute(key, options[key]);
function A(svgLine, angelDeg, svgLeft, svgRight) {
var x1 = Math.sin(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgLeft + r + b,
y1 = Math.cos(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgLeft + r + b,
x2 = Math.sin(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgRight + r + b,
y2 = Math.cos(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgRight + r +
svgLine.setAttribute("x1", x1),
svgLine.setAttribute("y1", y1),
svgLine.setAttribute("x2", x2),
svgLine.setAttribute("y2", y2);
})("svg");
阅读(...) 评论()javascript+SVG画饼图_百度知道
javascript+SVG画饼图
com/zhidao/wh%3D450%2C600/sign=39dfedc78d1/58ee3d6d55fbb2fbb4a20a44623dceb将26个英文字母分成6组.hiphotos，最好有注解://f.hiphotos.hiphotos.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http，请各位大哥帮忙.jpg" esrc="/zhidao/wh%3D600%2C800/sign=330fa61ea8af2eddd4a441efbd202dd1/58ee3d6d55fbb2fbb4a20a44623dceb://f，分不是问题，具体要求如下图.baidu://f.com/zhidao/pic/item/58ee3d6d55fbb2fbb4a20a44623dceb。存放bins计数G,A[F])/坐标计算缓存;/&#47.sin.setAttribute(&#39;&#39;/;F &) /www,&#39:/) ,&#39; + (X = Radius * C(R)) + &#39; + &#39:&#47,F; + Radius + &#39;.appendChild(NewSVGElement(&#39;++F){Count[F] && (R += 2 * Math.w3;string&#39;.w3.getAttribute(&#39;/是xlink命名空间的属性return Q};http&#39;svg&#39; + X + &#39;;translate(&#39.stroke,&#39;存储当前角度S = Math,&#47,&#47,A[F]) ;g&gt: + Radius + &#39;/Q;A指令的用法一句两句说不清楚: Qfor (F in A) F;/存放半径L/ Length)&#47, 益处是角度计算多的时候方便X.createElementNS(&#39.PI * Count[F] &#47,/;Q;//body&#39;/ &#39.substr(6);不是xlink命名空间的属性Q;, 还是看文档吧}))}return SVG}}(document)依旧是直接测试代码var TestSVG =QRSTU&#39.setAttributeNS(&#39,{?Q,/.split(&#39,Group = {}, 向右为x增;)[0].getElementsByTagName(&#39.setAttribute(F:&#39;默认填充样式}))X = RadiusY = 0for (F = 0;&#47.toUpperCase();http&#39,A)&#47,&#39;Smith&#39;)/&#47,//for (F = T,&#39; &#39;/;T[F].appendChild(G = NewSVGElement(&#39.w3;Q = &#39,&#39;/&#47!画布中心:&#47,&#39.substr(1))Group[T[F];height&#39://ABCD&#39, 向下为y增&#47,YcreatePieChart = function(document){var NewSVGElement = function(Q
大神，测试代码是什么
测试代码就是直接写JS的方法进行测试而已..
提问者评价
其他类似问题
svg的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁

我要回帖

更多关于 javascript 的文章

 

随机推荐