Первоначально у меня был встроенный svg, который работает так, как я хотел.настройка фонового изображения на динамические данные svg?
<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>
и было приятно, потому что он был рядный, я мог бы сделать JQuery селекторы на его undate: ширина/высота и атрибуты path.d.
таким образом, это был наложенный div, который не делал то, что я хотел.
Следующий шаг я думал, чтобы сохранить его как файл SVG, а затем ссылаться на него:
<div style="background-image:url('images/grid.svg');"></div>
, который идеально подходит для меня, потому что я взял что-то уже существующий и дал ему фон вместо имеющий весь новый div с данными.
вопрос, хотя с фоном маршрута изображения, является то, что я не могу динамически регулировать Высота/Ширина/path.d атрибуты
Есть ли способ, таким образом, что я могу получить лучшее из обоих миров?
background-image + being able to query and update the attributes?
Вот код, который я имел первоначально для функции встроенного set_gridSize:
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);
}
Спасибо! :)
Редактировать: Я использовал how to draw grid using html5 and (canvas or svg) как источник для вычисления SVG и html5 для сеток.
Это может представлять интерес: http://blog.cloudfour.com/media-queries-in-svg-images /. Тем не менее, вы обнаружите, что поддержка медиа-запросов в SVGs в качестве фоновых изображений является пятнистой. – cimmanon