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

Question

I want to know how can use a dynamic SVG image as a webpage background with background-repeat CSS property.

Here is a codepen for the SVG itself: http://codepen.io/megakoresh/pen/pyLkb

As you can see I have a hex that spawns another hex within it on hover with CSS transition. What I initially throught is that if I use the CSS background-image:url('SVG.svg') , that it would tile them up nicely and voila:

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

But apparently that breaks transition effect. I can technically tile this with PHP (or by hand, just by copypasting SVG objects), but that would make it very heavy on the client's hardware. Is there some way to tile this thing across the page without making PHP spam the page with 1000 and 1 SVG objects?

Edit: If I can't use the background tiling, maybe it's possible to add the hover animation directly into SVG itself? I mean technically it already is: the style of the SVG is imbedded into the SVG file inside <style> tag, but maybe there's some other way to use it such that it works with CSS backgrounds?

Like here , the animation works on this page, despite using the CSS background method, except it's inside the SVG itself somehow. Maybe it's possible to have a mouseover event in SVG too? Inkscape has that property, but it didn't seem to work when I tried it (I put the CSS transition in there).

Answer 1

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

here's a demonstration using javascript to tile the SVG in an absolutely positioned div behind your content (without having to repeat many instances of the svg in your html source.) I chose to use pointer-events: none; on the content div to pass the events through (so the tiles highlight behind the page content). This means that if you want users to be able to select text or click stuff you'll need to either remove that line or add pointer-events: auto; to the specific tags you want mouse-interactable. Note that the entire width of the block h1 element does not pass the mouse through, so the tiles don't highlight if you mouse over the h1 . But it does go through the p element, and you can't drag to select the p element. (At least in Chrome!)

this also might not work on old IE. dunno!

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

You can create this (almost) fully in svg. See: http://codepen.io/lemnis/pen/tCnGd

There are a few things you should keep mind:

• Instead of background-repeat, you have to use a svg pattern
• You can't use one pattern, because you want to animate a pattern
• SVG animation doesn't support a hover event, instead i'm using the mouseover and mouseout events to the trigger the animation.
• You can't use it as background-image because you will lose the interactivity

For animating every element (edit)

Unfortunately you need some javascript for animating every object. You can see here a rough example: http://codepen.io/lemnis/pen/bxpEh . I didn't try to embed the svg with embed, object or iframe. But I assume it will work fine. Also I switched back to css hovers and transitions for a better effect.