html - background image в svg элемент

#html #css #svg

Делаю интерактивную карту, сама карта нарисована сделана в svg и разбита по районам. 


Нужно в эти районы еще вставить картинки, чтоб было так:


Но проблема в том, что отображается нормально она только в Firefox, в Chrome и Opera
эта же картинка очень размытая, а в том же Firefox при наведении на эту область все
начинает сильно тормозить...

Вот часть кода с начала карты и этого района с фото:

Ответы

Ответ 1

Только как для примера!

Я использую js для того чтобы вычислить ширину, высоту каждой ячейки path и ее положение,
данные передаю image.



// 1 Картинка по размерам ячейки
$('path').each( function(){
  var $this = $(this),
    $width = $this[0].getBBox().width,
    $height = $this[0].getBBox().height,
    $top = $this.offset().top,
    $left = $this.offset().left;

  var imgSrc = $this.data('img'),
    img = $('#'+imgSrc).find('image');

  img.width($width);
  img.height($height);
  img.attr({'x': $left, 'y': $top});

});
html,
body {
padding: 0;
margin: 0;
}

path {
cursor:pointer;
}

path:not(:hover) {
fill: #eee;
}






Получается не совсем красиво и не по центру. 

Взяла как для примера еще вариант с увеличенным в 1.5 раза image и центрированием
в ячейке:



//2 Картинка в 1.5 раза больше ячейки и центрируется
$('path').each(function() {

  var $this = $(this),
    $width = $this[0].getBBox().width,
    $height = $this[0].getBBox().height,
    $top = $this.offset().top,
    $left = $this.offset().left;

  var imgSrc = $this.data('img'),
    img = $('#' + imgSrc).find('image');

  img.width(1.5 * $width);
  img.height(1.5 * $height);

  img.attr({
    'x': $left - $width / 2,
    'y': $top - $height / 2
  });

});
html,
body {
  padding: 0;
  margin: 0;
}

path {
  cursor: pointer;
}

path:not(:hover) {
  fill: #eee;
}








Полный пример на codepen