Aktuelle Zeit: 20. November 2017, 17:12



Auf das Thema antworten  [ 2 Beiträge ] 
 SVG per Javascript (Bettys Fadenspulenhalter) 
Autor Nachricht
Benutzeravatar

Registriert: 30. Juni 2011, 17:19
Beiträge: 808
Beitrag SVG per Javascript (Bettys Fadenspulenhalter)
Wir möchten ein Lochraster aus einer Sperrholzplatte laserausschneiden und kleine Hacken reinkleben.
um die Fadenspulen der Nähmaschine zu lagern.

Und weil es eine Fleissarbeit währe, die ganzen Löcher zu zeichnen, wollte ich ein Script machen.
Zuerst dachte ich an eine Schleife in einer bat Datei, um die svg Vierecke zu schreiben.

Aber weil ich das Script evtl wiederverwenden möchte, sollte es Systemunabhängig sein.
und pyton / qbasic etc. unabhängig. Am besten mit Javascript, weil das jeder Browser kann.

hier ist es.
Code:
<!DOCTYPE html>
<html>
<body>
<p>&lt;svg width="550" height="440"></p>
<p id="loch"></p>

[attachment=0]lochraster.JPG[/attachment]
<script>

text = "";
   
   var ix; //Schleife Anzahl Löcher horizontal
   var iy; //Schleife Anzahl Löcher vertikal
   
   function horizontal()
      {
      for (ix = 0; ix < 10; ix++) {  //10 Löcher horizontal
      text += "&lt;rect x\=\""+ ix *50 +"\" y\=\"" + iy *50 +"\" width=\"5\" height=\"7\" style=\"fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)\" \/&gt;" + "<br>";   
      }
   }
   
   for (iy = 0; iy < 8; iy++) {  //8 Löcher vertikal
   horizontal();
   text += "</br>"
   }
   
   document.getElementById("loch").innerHTML = text;
   
   
</script>

&lt;/svg>

</body>
</html>



und so sieht die Ausgabe im Browser aus:


Code:
<svg width="550" height="440">

<rect x="0" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="0" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="50" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="100" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="150" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="200" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="250" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="300" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

<rect x="0" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="50" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="100" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="150" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="200" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="250" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="300" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="350" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="400" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<rect x="450" y="350" width="5" height="7" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />

</svg>


und so sieht es im Inkscape aus:


Dateianhänge:
Dateikommentar: erster test
lochraster.JPG
lochraster.JPG [ 113.37 KiB | 4673-mal betrachtet ]
16. Februar 2015, 22:56
Profil Private Nachricht senden
Benutzeravatar

Registriert: 30. Juni 2011, 17:19
Beiträge: 808
Beitrag Re: SVG per Javascript (Bettys Fadenspulenhalter)
Skizze


Dateianhänge:
IMG-20150215-WA0002.jpg
IMG-20150215-WA0002.jpg [ 325.16 KiB | 4671-mal betrachtet ]
16. Februar 2015, 23:04
Profil Private Nachricht senden
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Auf das Thema antworten   [ 2 Beiträge ] 

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.

cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.
Deutsche Übersetzung durch phpBB.de