将背景图像设置为动态svg数据？ [英] setting background image to dynamic svg data?

问题描述

最初我有一些内联svg，按我想要的方式工作。

 < svg width =100％ 100％xmlns =http://www.w3.org/2000/svg> 
< defs> 
< pattern id =smallGridwidth =10height =10patternUnits =userSpaceOnUse> 
< path d =M 10 0 L 0 0 0 10fill =nonestroke =greystroke-width =0.5/> 
< / pattern> 
< pattern id =gridwidth =100height =100patternUnits =userSpaceOnUse> 
< rect width =100height =100fill =url（#smallGrid）/> 
< path d =M 100 0 L 0 0 0 100fill =nonestroke =greystroke-width =1/> 
< / pattern> 
< / defs> 
< rect width =100％height =100％fill =url（#grid）/> 
< / svg> 
  

很好，因为它是inline的，我可以做jQuery选择器上它：und /和path.d属性。

这样，它是一个重叠的div，它没有做我想要的。

下一步我想保存为一个svg文件，然后引用它：

 < div style =background-image：url（'images / grid.svg'）;>< / div> 
 

这对我来说是完美的，因为我拿了一些已经存在的东西，给它一个背景，整个新的div与数据。

问题，虽然与背景图片路由，是不能动态调整高度/宽度/ path.d属性

$

 背景：b 
 $ b 
有什么方法可以获得两个世界的最佳效果？ -image +能够查询和更新属性？ 
  

这是我最初用于内联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）; 
} 
  

谢谢！ ：）

编辑：我使用如何使用html5和（canvas或svg）绘制网格作为我的源，用于计算网格的SVG和html5。

解决方案

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

我的基本svg对象是在xml变量。从那里，我将maniuplate它与num需要，然后编码。这返回url（data：..）所以我只是将其设置为任何我想要的背景图像。

由于这是静态的，你可以改进这通过只是根据需要附加到字符串。我只是希望它是通用的，所以我可以根据需要替换xml任何svg数据我需要。

  function set_gridSize （num）{
 num = Number（num）; 
 
 var xml ='< svg width =100％height =100％xmlns =http://www.w3.org/2000/svg>< defs> < pattern id =smallGridwidth =10height =10patternUnits =userSpaceOnUse>< path d =M 10 0 L 0 0 0 10fill =nonestroke = stroke-width =0.5/> < / pattern>< pattern id =gridwidth =100height =100patternUnits =userSpaceOnUse>< rect width =100height =100fill =url（#smallGrid ）/>< path d =M 100 0 L 0 0 0 100fill =nonestroke =greystroke-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）; 
 
 returnurl（data：image / svg + xml; base64，+ Base64.encode（new XMLSerializer（）。serializeToString（defs.parent（）[0]））+）; 
} 
  

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.

解决方案

I first looked at the requirements, and what was needed. This might be not as efficient as other options. Nevertheless, still a viable solution.

My base svg object is in the xml variable. From there, i will maniuplate it as needed with "num" and then encode it. This returns url(data:..) so i just set it to the background-image of whatever i would like.

Given that this is static, you can improve upon this by just appending to the string as needed. I just wanted it to be generic enough such that i can just replace xml as needed with whatever svg data i needed.

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]))+")";
}

这篇关于将背景图像设置为动态svg数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！