Ursprünglich hatte ich einige Inline-Svg, die funktioniert, wie ich wollte.

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
    </pattern>
    <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect width="100" height="100" fill="url(#smallGrid)"/>
      <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#grid)" />
</svg>

und war schön, weil es inline war, ich konnte jQuery-Selektoren auf undate tun: Breite / Höhe und die Attribute path.d.

Auf diese Weise war es ein überlagertes Div, das nicht das tat, was ich wollte.

Nächster Schritt, den ich dachte, um es als SVG-Datei zu speichern, und verweisen Sie dann darauf:

<div style="background-image:url('images/grid.svg');"></div>

Das war perfekt für mich, weil ich etwas bereits Bestehendes genommen und ihm einen Hintergrund gegeben habe, anstatt ein ganz neues Div mit Daten zu haben.

Das Problem mit der Hintergrundbildroute ist jedoch, dass ich die Attribute "Höhe / Breite / Pfad.d" nicht dynamisch anpassen kann

Gibt es einen Weg, wie ich das Beste aus beiden Welten herausholen kann?

background-image + being able to query and update the attributes?

Hier ist der Code, den ich ursprünglich für die Inline-Funktion set_gridSize hatte:

Form.set_gridSize = function (num) {
    num = Number(num);
    Form.gridSize = num;

    var defs = $("div.grid-for-gridlock > svg > defs");
    defs.children("#smallGrid").attr({ Height: num, Width: num });
    var path = defs.children("#smallGrid").children().attr("d");
    var arr = path.split(" ");
    arr[1] = num;
    arr[arr.length - 1] = num;
    path = arr.join(" ");
    defs.children("#smallGrid").children("path").attr("d", path)
    defs.children("#grid").attr({ Height: num * 10, Width: num * 10 });
    defs.children("#grid").children("rect").attr({ eight: num * 10, Width: num * 10 });
    var path = defs.children("#grid").children("path").attr("d");
    var arr = path.split(" ");
    arr[1] = num*10;
    arr[arr.length - 1] = num*10;
    path = arr.join(" ");
    defs.children("#grid").children("path").attr("d",path);
}

Vielen Dank! :)

bearbeiten: ich benutzteWie zeichnet man ein Raster mit HTML5 und (Canvas oder Svg) als meine Quelle für das Herausfinden von SVG und HTML5 für Grids.