Menu
Originally i had some inline svg which works as i wanted.
<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>
and was nice because it was inline, i could do jQuery selectors on it to undate: Width/Height and the path.d attributes.
in that way, it was an overlaid div, which didnt do what i wanted.
Next step i was thinking to save it as an svg file, and then reference it:
<div style="background-image:url('images/grid.svg');"></div>
which was PERFECT for me, because i took something already existing and gave it a background instead of having an entire new div with data.
The issue though with the background image route, is that i cant dynamically adjust the Height/Width/ path.d attributes
Is there a way such that i can get the best of both worlds?
background-image + being able to query and update the attributes?
Here is code i had originally for the inline set_gridSize function:
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);
}
Thanks! :)
edit: I used how to draw grid using html5 and (canvas or svg) as my source for figuring out SVG and html5 for grids.
533
I can't see why you couldn't place ths inline svg in absolute positioned DIV as follows. It would function as a background and accessible via jQuery/Javacript.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body style='overflow:hidden'>
<div id="svgDiv" style='position:absolute;top:0px;left:0px;width:100%;height:100%'>
<svg id="mySVG" 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>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
