BlocksFromSVG

Creates multiple rigid body models based on a SVG-file. Currently the SVG Elements of rect, circle and path are supported. This is best be used with a figma sketch, where the shapes are drawn over an backdrop image (room.png) and exported separately as SVG (furniture.svg) to define the physics relevant parts.

The backdrop is used inside the html - a style definition and a div using the style:
.backdrop {
  position: absolute;
  top: 0;
  width: 1600px;
  height: 469px;
  background-size: cover;
  background-image: url('./room.png');
  pointer-events: none;
}

<div class="backdrop">

Constructor

# new BlocksFromSVG(world, file, blocks, optionsopt)

Parameters:

Name	Type	Attributes	Description
`world`	Matter.World		The Matter.js world
`file`	string		Path or URL to a SVG-file with multiple SVG Elements of type rect, circle or path
`blocks`	Array.<Block>		All created blocks will be added to this array
`options`	Matter.IChamferableBodyDefinition	<optional>	Defines the common behaviour of all created blocks e.g. mass, bouncyness or whether it can move

Source:: BlocksFromSVG.js, line 39
Tutorials:: Tutorial: 5 - SVG with multiple shapes Open preview , open code

Example

// Adding the furniture and accessories to the blocks array and into the matter world with coordinates perfectly matching the backdrop image.
new BlocksFromSVG(world, "furniture.svg", blocks, {
  isStatic: true, restitution: 0.0
})