将背景图像设置为动态svg数据？

最初我有一些内联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：Width/Height和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的网格。

来源

2014-02-20 Fallenreaper

这可能会感兴趣：http://blog.cloudfour.com/media-queries-in-svg-images /。但是，您会发现支持将SVG上的媒体查询作为背景图片是不明智的。 – cimmanon

-1

我首先查看了需求和需求。这可能不如其他选项那么有效。不过，仍然是一个可行的解决方案。

我的基础svg对象是在xml变量中。从那里，我将根据需要使用“num”进行编辑，然后对其进行编码。这将返回url（data：..），所以我只是将它设置为任何我想要的背景图像。

鉴于这是静态的，您可以根据需要追加字符串来改进。我只是希望它足够通用，这样我就可以根据需要用任何需要的svg数据替换xml。

function set_gridSize (num) { 
    num = Number(num); 

    var xml = '<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>'; 
    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]))+")"; 
}

来源

2014-02-21 14:17:59 Fallenreaper

我看不出为什么你不能把内联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" 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>

来源

2014-02-20 23:19:33

这几乎是我最终做的 – Fallenreaper

一个更简单的方法：

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" width="320px" height="100px" 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

来源

2014-08-18 07:02:32

“url（data：image/svg + xml; utf8，”+ encodeURI（svg）+“）”; – Maxmaxmaximus

var svg = document.querySelector('#svg'); 
var svgCode = encodeURI(svg.outerHTML); 

element.style.backgroundImage = "url(data:image/svg+xml;utf8," + svgCode + ")";

来源

2017-02-18 09:55:20 Maxmaxmaximus

将背景图像设置为动态svg数据？

回答

相关问题