如何在 javascript 中将 SVG 旋转 45 度

Question

所以我有一个 SVG 的 url，它是从生成 QR 码的 API 中获得的，而 SVG 是 QR 码的图像。我似乎无法找出将这个 SVG 旋转 45 度的最佳方法，我尝试获取 svg url，进行 axios 调用以获取文本数据，然后尝试从那里旋转，应该将其转换为 PNG 或因此出现 SVGToImg不是我认为的函数，但我猜库没有这样的函数。这是我刚才尝试过但尚未成功的方法。我的库位于代码的顶部

代码：

 const { createCanvas } = require("canvas");
    const svg2img = require("svg2img");
    const svgToImg = require("svg-to-img");

const qrCodeSvgUrl = qrCodeData.data.qr_code;
// Fetch SVG content
const svgResponse = await axios.get(qrCodeSvgUrl, { responseType: "text" });
console.log("svg response = ", svgResponse.data);
const qrCodeSvg = svgResponse.data;

// Convert SVG to PNG
const pngBuffer = await svgToImg(qrCodeSvg, { format: "png" });

// Create a canvas and load PNG buffer
const canvas = createCanvas(200, 200); // Adjust size as needed
const ctx = canvas.getContext("2d");
const img = new canvas.Image();
img.src = pngBuffer;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

// Rotate the canvas by 45 degrees
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((45 * Math.PI) / 180);
ctx.drawImage(img, -canvas.width / 2, -canvas.height / 2);

// Convert canvas back to PNG
const rotatedPngBuffer = canvas.toBuffer();
console.log("rotated svg url to visit = ", rotatedPngBuffer);
qrCodeData.data.qr_code = rotatedPngBuffer;

Answer 1

您可以使用 CSS 旋转图像：

img {
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  padding: 35px;
}

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ib3JhbmdlIiAvPgo8L3N2Zz4=">

或者将 SVG 包裹在另一个 SVG 中，然后旋转它：

<svg viewBox="0 0 100 100" width="270" xmlns="http://www.w3.org/2000/svg">
  <image transform="translate(15 15) rotate(45 35 35)" width="70" height="70"
    href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ib3JhbmdlIiAvPgo8L3N2Zz4=" />
</svg>