Javascript 使用svg.js清除并重新绘制

我想使用svg.js绘制一些元素，然后清除画布并绘制新元素。我正在使用，但当我重新绘制元素时，它们不可见。这个方法是正确的还是我遗漏了什么？我也试过了

var宽度=500；
var高度=500；
var pos_x=0；
var pos_y=0；
var texto=[]；
var grupo=[]；
var rect=[]；
var clip=[]；
var随机旋转=[]；
var latino='ABCDEFGHIJKLMNOPQRSTUVXYZ'。拆分（''；
var cirilico=“АБББГБББГББББББЙСБММПППСППСПСФЧЩЪЮЯ”。拆分（“”）；
var hebreo=‘分割’（“”）；
var griego='griego='griego='griego='griego='Δ∧∧∧∧∏∏∏∏∏∑∑ψ'。拆分（''）；
var arabe=‘分割’（‘分割’）；
科里亚诺酒店ㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣㅐㅒㅔㅖㅘㅙㅚㅝㅞㅟㅢㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㄲㄸㅃㅆㅉㄳㄵㄶㄺㄻㄿㄽㄾㄿㅀㅄ'.分裂（“”）；
格拉戈利蒂科变种ⰀⰁⰂⰃⰄⰅⰆⰇⰈⰉⰊⰋⰌⰍⰎⰏⰐⰑⰒⰓⰔⰕⰖⰗⰘⰙⰚⰛⰜⰝⰞⰟⰠⰡⰢⰣⰤⰥⰦⰧⰨⰩⰪⰫⰬⰭⰮ'.分裂（“”）；
平假名变种あかさたなはまやらわがざだばぱいきしちにひみり(ゐ)ぎじぢびぴうくすつぬふむゆるぐずづぶぷえけせてねへめれ(ゑ)げぜでべぺおこそとのほもよろをごぞどぼぽ'.分裂（“”）；
片假名变种アカサタナハマヤラワガザダバパヴァイキシチニヒミリ(ヰ)ギジヂビピヴィウクスツヌフムユルグズヅブプヴエケセテネヘメレ(ヱ)ゲゼデベペヴェオコソトノホモヨロヲゴゾドボポヴォ'.分裂（“”）；
var sistemas=[拉丁美洲人、西里克人、希伯雷奥人、格里戈人、阿拉贝人、科里亚诺人、格拉戈利提科人、平假名人、片假名人]；
阿尔法贝托风险值=[]；
var letra=[]；
var draw=SVG（）.addTo（'.container'）.size（宽度、高度）.attr（{id:'SVG'}）；
函数getRndInteger（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
函数getRndFloat（最小值、最大值）{
返回值（Math.random（）*（max-min））+min；
}
//创建符号
函数grafema（）{
对于（变量i=0；i 200）{
pos_x=0；
位置y=位置y+200；
}
clip[i]=draw.clip（）.add（rect[i]）；
grupo[i].clipWith（clip[i]）；
}
}
grafema（）；
draw.clear（）；
grafema（）；

---

这是我正在尝试创建的程序的简化版本。将来，每当用户单击时，我希望清除并重新绘制。

代码中的问题不是

清除（）

方法。您正在使用全局变量

pos_x

和

pos_y

，并对它们进行递增。在第二张图形中，图像位于可见区域之外。要解决此问题，请在

grafema

函数的开头初始化这些变量：

/。。。
函数grafema（）{
pos_x=0；
pos_y=0；
对于（var i=0；i
var width = 500;
var height = 500;

var pos_x = 0;
var pos_y = 0;

var texto = [];
var grupo = [];
var rect = [];
var clip = [];
var random_rotation = [];

var latino = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'.split('');
var cirilico = 'АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЬЮЯ'.split('');
var hebreo = 'אבגדהוזיךכל   םמןנסעףפפצקחט   '.split('');
var griego = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨ'.split('');
var arabe = 'ابتثجحخدذرزسشصضطظعغفقكلمنهويةءأإ'.split('');
var coreano = 'ㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣㅐㅒㅔㅖㅘㅙㅚㅝㅞㅟㅢㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㄲㄸㅃㅆㅉㄳㄵㄶㄺㄻㄿㄽㄾㄿㅀㅄ'.split('');
var glagolitico = 'ⰀⰁⰂⰃⰄⰅⰆⰇⰈⰉⰊⰋⰌⰍⰎⰏⰐⰑⰒⰓⰔⰕⰖⰗⰘⰙⰚⰛⰜⰝⰞⰟⰠⰡⰢⰣⰤⰥⰦⰧⰨⰩⰪⰫⰬⰭⰮ'.split('');
var hiragana = 'あかさたなはまやらわがざだばぱいきしちにひみり(ゐ)ぎじぢびぴうくすつぬふむゆるぐずづぶぷえけせてねへめれ(ゑ)げぜでべぺおこそとのほもよろをごぞどぼぽ'.split('');
var katakana = 'アカサタナハマヤラワガザダバパヴァイキシチニヒミリ(ヰ)ギジヂビピヴィウクスツヌフムユルグズヅブプヴエケセテネヘメレ(ヱ)ゲゼデベペヴェオコソトノホモヨロヲゴゾドボポヴォ'.split('');

var sistemas = [latino, cirilico, hebreo, griego, arabe, coreano, glagolitico, hiragana, katakana];

var alfabeto = [];
var letra = [];

var draw = SVG().addTo('.container').size(width, height).attr({id: 'svg'}); 

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRndFloat(min, max) {
  return (Math.random() * (max - min)) + min;
}

// Create symbols
function grafema(){
    for (var i = 0; i <= 3; i++){

        alfabeto[i] = getRndInteger(0, sistemas.length - 1);

        letra[i] = sistemas[alfabeto[i]][getRndInteger(0, sistemas[alfabeto[i]].length - 1)];

        random_rotation[i] = getRndInteger(0, 360);

        texto[i] = draw.text(letra[i])
                    .font({
                        family: 'Arial Unicode MS',
                        size: 500,
                        anchor: 'middle'
                    })
                    .transform({
                        translateX: width/2,
                        translateY: (height/2) * -1,
                        rotate: random_rotation[i],
                        scale: getRndFloat(0.5, 0.6)
                    });

        grupo[i] = draw.group()
                    .attr({
                        id: 'letra ' + i
                    });

        grupo[i].add(texto[i]);

        rect[i] = draw.rect(200, 200)
                    .attr({
                        x: pos_x,
                        y: pos_y,
                    })
                    .transform({
                        rotate : random_rotation[i],
                    });

        pos_x = pos_x + 200;

        if (pos_x > 200) {
            pos_x = 0;
            pos_y = pos_y + 200;
        }

        clip[i] = draw.clip().add(rect[i]);
        grupo[i].clipWith(clip[i]);
    }
}

grafema();
draw.clear();
grafema();