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

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的许多实例。）我选择在内容div上使用pointer-events: none;传递事件（因此瓷砖在页面内容后面突出显示）。这意味着，如果您希望用户能够选择文本或点击内容，则需要删除该行或将pointer-events: auto;添加到您希望鼠标可交互的特定标签。请注意，块h1元素的整个宽度不会通过鼠标，因此如果将鼠标悬停在h1上，则切片不会突出显示。但它确实通过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;
}

Answer 2

你可以在svg中完全创建（几乎）。看到： http://codepen.io/lemnis/pen/tCnGd

你应该记住一些事情：

而不是背景重复，你必须使用svg模式
您不能使用一种模式，因为您想要为模式设置动画
SVG动画不支持悬停事件，而是使用mouseover和mouseout事件来触发动画。
您不能将其用作背景图像，因为您将失去交互性

为每个元素设置动画（编辑）

不幸的是，你需要一些javascript来为每个对象制作动画。你可以在这里看到一个粗略的例子：http://codepen.io/lemnis/pen/bxpEh。我没有尝试使用embed，object或iframe嵌入svg。但我认为它会正常工作。此外，我切换回css悬停和过渡以获得更好的效果。

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

2 个答案:

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

为每个元素设置动画（编辑）