Can't rotate loaded SVG in p5js - svg

Question

I'm trying to load an external SVG with
I'm using p5js-svg with p5js and for the most part I don't have any issues, but I'm stuck trying to rotate a loaded SVG. I'm working with both the last versions of pj5s and the library (p5js v1.4.1 and p5js-svg v1.3.3).
Here is the code to reproduce:
function preload() {
svgs = [
loadSVG('/img/plantilla_01.svg'),
loadSVG('/img/plantilla_02.svg'),
loadSVG('/img/plantilla_03.svg')
]}
function setup() {
createCanvas(windowWidth, windowHeight, SVG)
noLoop()
angleMode(DEGREES)
imageMode(CENTER)
}
function draw() {
let posX = 0
let posY = 0
let imagen
for (let index = 0; index < 10; index++) {
let giro = random(-90, 90)
push()
translate(width/2, height/2)
rotate(giro)
imagen = svgs[floor(random(0,3))]
image(imagen, posX, posY, width/10, height/10)
posX += width/10
posY += height/10
pop()
}
}
The loaded SVGs are Adobe Illustrator-produced, and there's no issue with loading and displaying them. Which can be the issue with the rotation?

Answer 1

I think there's a bug with transforms not being applied to image() with the SVG renderer and loadSVG() (and I see you've already raised an issue on github).
One workaround could be using loadImage() instead of loadSVG():
function preload() {
svgs = [
loadImage('/img/plantilla_01.svg'),
loadImage('/img/plantilla_02.svg'),
loadImage('/img/plantilla_03.svg')
]}
function setup() {
createCanvas(windowWidth, windowHeight, SVG)
noLoop()
angleMode(DEGREES)
imageMode(CENTER)
}
function draw() {
let posX = 0
let posY = 0
let imagen
for (let index = 0; index < 10; index++) {
let giro = random(-90, 90)
push()
translate(width/2, height/2)
rotate(giro)
imagen = svgs[floor(random(0,3))]
image(imagen, posX, posY, width/10, height/10)
posX += width/10
posY += height/10
pop()
}
}

Answer 2

I ran into the same issue and used Javascript to fix it. Note that inline CSS only worked in the browser.
function addRotationHack(ele = "rect, circle, ellipse, line, polyline, polygon, path") {
// select shapes in the SVG
var elements = document.querySelectorAll(ele);
// loop through them
for (let i = 0; i < elements.length; i++) {
let deg = Math.random() * 360;
// ❌ Works in the browser, but not Illustrator (doesn't support inline CSS(?))
// elements[i].style.transform = `rotate(${deg}deg)`;
// ✅ instead set the property directly
elements[i].setAttribute("transform", `rotate(${deg})`);
}
}
// ... then call in draw() after your image
image(imagen, posX, posY, width/10, height/10)
addRotationHack();