Как в Snap.svg применить свойство clip-path к изображению?

Question

[Алексей]

Всем привет!

Изучаю snap.svg, пытаюсь картинке указать свойство clip-path, но почему то не срабатывает, как будто не видит элемент

<div class="book-cover__image">
  <svg width="300" height="300" id="coversvg" ></svg>
</div>

(function($) {
  var s = Snap("#coversvg");
  var image = s.image("https://cdn.filepicker.io/api/file/V5oVAuB8QcCDEYgY2d2K", 5, 5, 464, 290);
  var r = s.rect(5, 5, 290, 290).toDefs();
  
    
  $('#coversvg').find('rect').wrap('<clipPath id="clip-image1"></clipPath>');
  image.attr({
    "clip-path": "url(#clip-image1)"
  });
    
})(jQuery);

В гугле похожих примеров найти не удалось, в офф. документации про clipPath тоже ни слова. Кто может подсказать? Спасибо!

codepen.io/AmateR/pen/xRYmoP

Answer 1

[Алексей]

Сделал так:

<div class="book-cover__image">
  <svg width="300" height="300" id="coversvg" xmlns="http://www.w3.org/2000/svg"></svg>
</div>

(function($) {
  var s = Snap("#coversvg");
  var paper = s.paper;
  paper.image('https://cdn.filepicker.io/api/file/V5oVAuB8QcCDEYgY2d2K',5,5,464,290);
  var clipPath = paper.el('clipPath').toDefs();
  clipPath.node.id = clipPath.id;
  var rect = paper.rect(5, 5, 290, 290);
  clipPath.append(rect);

  s.select('image:last-child').attr({
    clipPath:'url(#'+clipPath.id+')'
  });
})(jQuery);