PNG спрайты в SVG-графике

Question

У меня есть этот файл PNG с регулярными интервалами спрайтов, и я бы хотел использовать его в своем веб-приложении, которое использует SVG для визуализации. Конечно, я мог бы наложить SVG документ с плавающими элементами и сделать ол-хороший

<img style="width: 32px; height: 32px; background: url(sprites.png) 0 0;"/> 

Но это было бы грязно обрабатывать как SVG и HTML наложений отдельно.

Какова будет разметка SVG для использования одного и того же png-спрайта для отображения растровых значков в документе SVG?

Answer 1

Вот пример, который показывает, как применять SVG вырезку в PNG изображение, чтобы обрезать его, чтобы показать только выбранный кадр: http://jsfiddle.net/passiday/trke6nou/

// See the Sprite class in JSFiddle 
var bird = new Sprite({ 
    stage  : "stage", 
    id   : "bird", 
    href  : "http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/07/1406635974jay.png", 
    imageWidth : 329, 
    imageHeight: 300, 
    frames  : 8, 
    tileCols : 3, 
    tileWidth : 110, 
    tileHeight : 100 
}); 
bird.set(frame, x, y);