无法在 p5js 中旋转加载的 SVG答案

【问题标题】：Can't rotate loaded SVG in p5js无法在 p5js 中旋转加载的 SVG
【发布时间】：2022-08-11 02:44:38
【问题描述】：

我正在尝试加载外部 SVG

我将 p5js-svg 与 p5js 一起使用，并且在大多数情况下我没有任何问题，但我一直在尝试旋转加载的 SVG。我正在使用 pj5s 的最新版本和库（p5js v1.4.1 和 p5js-svg v1.3.3）。这是重现的代码：

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()
  }
  }

加载的 SVG 是 Adobe Illustrator 制作的，加载和显示它们没有问题。哪个可能是轮换的问题？

标签： svg p5.js

【解决方案1】：

我认为使用SVG 渲染器和loadSVG() 没有将转换应用于image() 存在一个错误（我看到你已经提出了issue on github）。

一种解决方法是使用loadImage() 而不是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()
  }
}

【讨论】：

是的，我试过了，它可以工作（所以有点回答），但它会将 SVG 渲染为像素，所以它违背了目的，因为我们不能再保存矢量形状了。
有预感会是这样。不幸的是，我没有时间研究 p5.svg 库的错误修复。如果这是时间紧迫的，那么可能值得查看其他 JS svg 库，例如 svg.js、SnapSVG，或者 paper.js 也有可能提供帮助。在最坏的情况下，应该可以使用 vanilla JS 访问加载的 SVG，并使用 DOM 将它们插入主 SVG 并为其设置动画。

【解决方案2】：

我遇到了同样的问题并使用 Javascript 来修复它。请注意，内联 CSS 仅在浏览器中有效。

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();

【讨论】：