将背景图像设置为动态 svg 数据？
Posted
技术标签:
【中文标题】将背景图像设置为动态 svg 数据？【英文标题】：setting background image to dynamic svg data? 【发布时间】：2014-03-21 19:46:49 【问题描述】：最初我有一些内联 svg，可以按我的意愿工作。
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-/>
</pattern>
<pattern id="grid" patternUnits="userSpaceOnUse">
<rect fill="url(#smallGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-/>
</pattern>
</defs>
<rect fill="url(#grid)" />
</svg>
很好，因为它是内联的，我可以在它上面做 jQuery 选择器来取消日期：宽度/高度和 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。
【问题讨论】：
这可能很有趣：blog.cloudfour.com/media-queries-in-svg-images。但是，您会发现对 SVG 作为背景图像的媒体查询的支持参差不齐。 【参考方案1】：我不明白为什么不能将内联 svg 放置在绝对定位的 DIV 中，如下所示。它可以作为背景使用，并可通过 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" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-/>
</pattern>
<pattern id="grid" patternUnits="userSpaceOnUse">
<rect fill="url(#smallGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-/>
</pattern>
</defs>
<rect fill="url(#grid)" />
</svg>
</div>
</body>
</html>
【讨论】：
这几乎就是我最终做的事情【参考方案2】：更简单的方法：
var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";
Fiddle Here
【讨论】：
"url(data:image/svg+xml;utf8," +encodeURI(svg) + ")";【参考方案3】：var svg = document.querySelector('#svg');
var svgCode = encodeURI(svg.outerHTML);
element.style.backgroundImage = "url(data:image/svg+xml;utf8," + svgCode + ")";
【讨论】：
【参考方案4】：我首先查看了需求，以及需要什么。这可能不如其他选项有效。尽管如此，仍然是一个可行的解决方案。
我的基本 svg 对象在 xml 变量中。从那里，我将根据需要使用“num”对其进行操作，然后对其进行编码。这会返回 url(data:..) 所以我只是将它设置为我想要的任何背景图像。
鉴于这是静态的，您可以通过根据需要附加到字符串来改进它。我只是希望它足够通用，以便我可以根据需要用我需要的任何 svg 数据替换 xml。
function set_gridSize (num)
num = Number(num);
var xml = '<svg xmlns="http://www.w3.org/2000/svg"><defs><pattern id="smallGrid" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-/> </pattern><pattern id="grid" patternUnits="userSpaceOnUse"><rect fill="url(#smallGrid)"/><path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-/></pattern></defs><rect fill="url(#grid)" /></svg>';
var data = $($.parseXML(xml));
var defs = data.children("svg").children("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( height: 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);
return "url(data:image/svg+xml;base64," + Base64.encode(new XMLSerializer().serializeToString(defs.parent()[0]))+")";
【讨论】：
以上是关于将背景图像设置为动态 svg 数据？的主要内容，如果未能解决你的问题，请参考以下文章
SVG 作为 MIXIN 中的背景图像通过 SASS 变量设置颜色