html - 如何使用 SVG 作为响应式重复网页背景？

Question

我想知道如何使用动态 SVG 图像作为网页背景 background-repeat CSS 属性。

这是 SVG 本身的代码笔:http://codepen.io/megakoresh/pen/pyLkb

如您所见，我有一个十六进制，在悬停时使用 CSS 过渡在其中生成另一个十六进制。我最初想到的是，如果我使用 CSS background-image:url('SVG.svg') ，它会很好地平铺它们，瞧:

body{
margin: 0;
padding: 0;
background: url('SVG_optimized.svg');
}

但显然这打破了过渡效果。从技术上讲，我可以用 PHP 来平铺它(或者手动，仅通过复制粘贴 SVG 对象)，但这会使它在客户端的硬件上变得非常沉重。有没有什么方法可以在整个页面上平铺这个东西，而不会使 PHP 向包含 1000 和 1 个 SVG 对象的页面发送垃圾邮件？

编辑:如果我不能使用背景平铺，也许可以将悬停动画直接添加到 SVG 本身？我的意思是技术上它已经是:SVG 的样式嵌入到 <style> 内的 SVG 文件中。标签，但也许还有其他方法可以使用它来处理 CSS 背景？

赞here ，尽管使用了 CSS 背景方法，但动画在此页面上仍然有效，只是它以某种方式位于 SVG 本身内部。也许在 SVG 中也可以有鼠标悬停事件？ Inkscape 具有该属性，但当我尝试时它似乎不起作用(我将 CSS 转换放在那里)。

Answer 1

http://codepen.io/anon/pen/GEkAy

这是一个使用 javascript 将 SVG 平铺在内容后面绝对定位的 div 中的演示(无需在 html 源代码中重复 svg 的许多实例。)我选择使用 pointer-events: none; 在内容 div 上传递事件(因此磁贴突出显示在页面内容后面)。这意味着如果您希望用户能够选择文本或单击内容，您需要删除该行或将 pointer-events: auto; 添加到您希望鼠标可交互的特定标签。请注意， block h1 元素的整个宽度不会让鼠标穿过，因此如果您将鼠标悬停在 h1 上，图 block 不会突出显示。但它确实通过了 p 元素，您不能通过拖动来选择 p 元素。 (至少在 Chrome 中!)

这也可能不适用于旧的 IE。不知道!

full code linked at top. 
(snip)

var $svg = $('.hex').clone();
for(var i = 0; i<n_x*n_y; i++){
  $svg.clone(true).appendTo('#background');
}
$('.CLinner-path').each(function(){
  var self = this;
  $(this).on('mouseover', function(){
    self.classList.add('shiny')
    console.log('mouseover!', self);
  });

  $(this).on('mouseout', function(){
    self.classList.remove('shiny')
  });
});

(snip)

.CLinner-path{
  fill: #fa8928;
  fill-opacity: 1;
  stroke-width: 6;
  marker-start: none;
  marker-mid:   none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.CLinner-path.shiny{
  opacity:1;
}