How can i put a texture on a SVG bodies

[HIJackone]

Hi,
I have a question on svg bodies.
As i use a banana svg,i put a sprite on it , result will like this(There will be many banana.png on one image):

then,i got a suggest from #153

 loop through body.parts from index 1 (important) and then set each part.sprite = null

and i do this ,i can get a "right result" like this(Use different colors to mark different parts):

but,i find a tough problem,this spirte texture can not follow bodies move(bodies move , spirte texture no move)
code:

const parser = new DOMParser()
const doc = parser.parseFromString('<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.42 107.87"><path class="cls-1" d="M48.68,18.6s-1.43,1.31-.71,2.14c0,0,.51.36,0,.71s-1.48.27,0,1.42,2.93,2.79,0,5.69-14.2,6.88-19.92,24.19-6.41,50.84,37,69c29.67,12.42,56.74-7.32,47-10,0,0,23.67-7.15,21.34-17.79-.82-3.78-8.53-3.55-8.53-3.55s24.56-14.95,24.9-27.75c.15-5.74-9.79-2.27-12.1-2.13s-37.68,9.36-53.35,2.84S59.43,43.5,59.36,29.27c0-2.51,1.78-2.85.71-5,0,0,0-3-1.43-4.27s-2.22-.38-3.55-.71S50.67,16.93,48.68,18.6Z" transform="translate(-25.29 -17.95)"/></svg>', 'image/svg+xml')
var sets = select(doc, 'path')
    .map(function(path) { return Svg.pathToVertices(path, 10) })

let randomColor = Math.floor(Math.random()*16777215).toString(16);
svgOne = Bodies.fromVertices(
    cX,
    cY,
    sets, {
        restitution: 0.3,
        friction: 1,
        frictionStatic: 1,
        frictionAir: 0.05,
        render: {
            sprite: {
                texture: './6.png',
                xScale: 0.5,
                yScale: 0.5
            }
        },
        collisionFilter: {
            group: Math.floor(1),
            category: 1,
            mask: 1
        }
    }, true);

const maxArea = Math.max.apply(null, svgOne.parts.map((item, key) => {
    return key !== 0 && item.area
}))
console.log(maxArea)
svgOne.parts.forEach((body, key) => {
    const randomColor = Math.floor(Math.random() * 16777215).toString(16)
    body.render.fillStyle = '#' + randomColor
    if (key !== 0 && body.area < maxArea) {
        body.render.sprite = null
    }
})
vertexSets.push(svgOne);

so what should i do

[ggorlen]

The internal renderer is for prototyping purposes. Consider animating a SVG DOM node or a canvas, which supports arbitrary textures. This could look like a combination of a couple Stack Overflow answers:

• Using Matter.js to render to the DOM or React
• How to use an SVG image in Matter.js?

The general set up will be the top link, running MJS with a custom DOM front-end, then extending it to bring in SVGs as shown in the second link. But instead of hiding the SVGs as shown in the second link, you'll keep them visible in the DOM and rotate and move the elements based on MJS' body positions. This could be a bit tricky since I think you'll need to translate MJS' center of mass x/y point for the body to rotate around, which might require some fussing since absolute positioning works from the top-left corner. I'll add a proof of concept when I have time.