通過使用js oop和svg繪圖循環

當我正在練習oop時，我正在失去焦點，我不知道如何繼續。我有兩個代碼，我需要統一這兩個代碼。我需要通過使用oop的方法來初始化svg的變量。通過使用js oop和svg繪圖循環

需要幫助。謝謝。

function ArrayMaker(svgcx, svgcy ,svgr ,svgstroke ,svgstroke_width ,svgfill) { 
    this.svgcx = 100; 
    this.svgcy = 50; 
    this.svgr = 40; 
    this.svgstroke = "red"; 
    this.svgstroke_width = 3; 
    this.svgfill = "yellow"; 
    this.theArray = [ this, svgcx ,svgcy ,svgr ,svgstroke ,svgstroke_width ,svgfill ]; 
} 

ArrayMaker.prototype = { 
    someMethod: function() { 
     alert('someMethod called'); 
    }, 
    getArray: function() { 
     return this.theArray; 
    } 
}; 

var am = new ArrayMaker('one', 'two'); 
var other = new ArrayMaker('first', 'second'); 

alert(am.getArray());

此代碼工作：

var cx=100; 
var cy=50; 
var r=40; 
var stroke="red"; 
var stroke_width=3; 
var fill="yellow"; 
var htm = "<html>"; 
htm += "<head>"; 
htm += "<title>test3</title>"; 
htm += "</head>"; 
htm += "<body>"; 
htm += "<svg "; 
htm += " version="; 
htm += "\"1.1\""; 
htm += ">"; 
htm += "<circle "; 
htm += "cx="+cx+" "; 
htm += "cy="+cy+" "; 
htm += "r="+r+" "; 
htm += "stroke="+stroke+" "; 
htm += "stroke-width="+stroke_width+" "; 
htm += "fill="+fill+" "; 
htm += "/>"; 

htm += "</body>"; 
htm += "</html>"; 
document.write(htm);

來源

2012-03-07 user1255490

要創建具有JS，你需要使用createElementNS()並創建了SVG命名空間（http://www.w3.org/1999/xhtml）元素SVG元素。例如，看到這個演示我的網站：http://phrogz.net/SVG/svg_in_xhtml5.xhtml

var svgNS = "http://www.w3.org/1999/xhtml"; 
function createOn(root, name, attrs){ 
    var el = document.createElementNS(svgNS,name); 
    for (var attr in attrs){ 
    if (attrs.hasOwnProperty(attr)) el.setAttribute(attr,attrs[attr]); 
    } 
    return root.appendChild(el); 
} 
var svg = createOn(document.body, 'svg', {viewBox:'-100 -100 200 200'}); 
createOn(svg, 'circle', { cx:-60, cy:-50, r:20, fill:'#000' });

注意，SVG屬性在任何命名空間，所以你可以用setAttribute()（正如我上面所做的那樣）或setAttributeNS(null,...)。但是，對於在SVG之外指定的屬性，這不是真的，比如XLink的href。爲此，您需要使用正確的名稱空間創建屬性。

來源

2012-03-07 21:44:17 Phrogz

你有任何想法乳清屬性不在svg命名空間？我有點困惑。 – david 2012-03-07 21:49:53

@david這就是XML的工作原理。從[命名空間崩潰課程]（https://developer.mozilla.org/en/SVG/Namespaces_Crash_Course）：_「默認情況下，屬性根本沒有命名空間，只知道它們是唯一的，因爲它們出現在一個本身具有唯一名稱的元素。「_ – Phrogz 2012-03-07 23:26:12

有趣的鏈接，謝謝。我發現奇怪的是，這些屬性並沒有採用默認的命名空間。 – david 2012-03-08 00:42:03

你應該離開w3schools和document.write。它們都代表了舊的做事方式。

Phrogz在我之前回答，但我會發佈一個鏈接到一個jsFiddle，你可以隨時玩。

http://jsfiddle.net/ctrlfrk/nnjsw/

在該鏈接的代碼將告訴你如何正確地創建一個「圓圈」的對象，以及如何將一個方法添加到原型（在這種情況下，移動圓圈）

來源

2012-03-07 21:49:00 david

通過使用js oop和svg繪圖循環

回答

相關問題