使用js-op和svg绘制循环

Drawing cycle by using js oop and svg

本文关键字：绘制 循环 svg js-op 使用      更新时间：2023-09-26

我在练习接力时注意力不集中，不知道如何继续。我有两个代码，我需要将这两个代码联合起来。我需要使用oop方法初始化svg的变量。

需要帮助。谢谢

链接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);

要使用JS创建SVG元素，需要使用createElementNS()并使用SVG命名空间（http://www.w3.org/1999/xhtml）创建元素。例如，请在我的网站上查看此演示：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），情况并非如此。为此，您需要创建具有正确名称空间的属性

你应该远离w3schools和document.write。它们都代表了旧的做事方式。

Phrogz在我之前回答了，但我会发布一个jsFiddle的链接，你无论如何都可以玩。

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

该链接中的代码将向您展示如何正确创建"圆形"对象，以及如何向原型添加方法（在本例中是移动圆形）

相关文章：