如何在不丢失一部分的情况下旋转 canvas 中的 svg 元素？

Question

我将基本的 svg 字符串绘制成 canvas 看起来像这样

它在没有旋转时打印得很好applied.I想通过使用

旋转它（基于数字变量）

svg style="transform-origin: bottom;transform:rotate(${rotationAngle}deg);"

当我这样做时，有趣的是矩形的某些部分被切割如下（在本例中旋转角度为 10 作为示例）

如何在不裁剪且不改变其位置的情况下旋转此 svg？

const rotationAngle=10;
const data={
Text: "1693",
State: 0,
SvgColor: "#FD3535",
SvgTextColor: "#ffffff"
}
let img = new Image();
let b64 = "data:image/svg+xml;base64,";
let xml = `<svg style="transform-origin: bottom;transform:rotate(${rotationAngle}deg);"
    width="101" height="51" fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <mask id="path-1-inside-1_39189_44002" fill="white">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.19727 0.449707C1.98813 0.449707 0.197266 2.24057 0.197266 4.44971V6.13392V13.6076V15.1865V16.6602V20.4497C0.197266 22.6588
        1.98813 24.4497 4.19727 24.4497H17.1722C17.1903 24.4852 17.2108 24.5203 17.2337 24.5547L19.3652 27.7519C19.761 28.3457 20.6335 28.3457
        21.0293 27.7519L23.1608 24.5547C23.1838 24.5203 23.2043 24.4852 23.2224 24.4497H36.1973C38.4064 24.4497 40.1973 22.6588 40.1973
        20.4497V4.44971C40.1973 2.24057 38.4064 0.449707 36.1973 0.449707H4.19727Z" />
      </mask>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.19727 0.449707C1.98813 0.449707 0.197266 2.24057 0.197266 4.44971V6.13392V13.6076V15.1865V16.6602V20.4497C0.197266
      22.6588 1.98813 24.4497 4.19727 24.4497H17.1722C17.1903 24.4852 17.2108 24.5203 17.2337 24.5547L19.3652 27.7519C19.761
      28.3457 20.6335 28.3457 21.0293 27.7519L23.1608 24.5547C23.1838 24.5203 23.2043 24.4852 23.2224 24.4497H36.1973C38.4064
      24.4497 40.1973 22.6588 40.1973 20.4497V4.44971C40.1973 2.24057 38.4064 0.449707 36.1973 0.449707H4.19727Z"
        fill="${data.SvgColor}" />
      <path
        d="M17.1722 24.4497L18.063 23.9953L17.7847 23.4497H17.1722V24.4497ZM17.2337 24.5547L18.0658 24L18.0658 24L17.2337
      24.5547ZM19.3652 27.7519L18.5332 28.3066L19.3652 27.7519ZM21.0293 27.7519L21.8614 28.3066L21.0293 27.7519ZM23.1608
      24.5547L22.3288 24L22.3287 24L23.1608 24.5547ZM23.2224 24.4497V23.4497H22.6098L22.3315 23.9953L23.2224 24.4497ZM1.19727
      4.44971C1.19727 2.79285 2.54041 1.44971 4.19727 1.44971V-0.550293C1.43584 -0.550293 -0.802734 1.68829 -0.802734 4.44971H1.19727ZM1.19727
      6.13392V4.44971H-0.802734V6.13392H1.19727ZM1.19727 13.6076V6.13392H-0.802734V13.6076H1.19727ZM1.19727 15.1865V13.6076H-0.802734V15.1865H1.19727ZM1.19727
      16.6602V15.1865H-0.802734V16.6602H1.19727ZM1.19727 20.4497V16.6602H-0.802734V20.4497H1.19727ZM4.19727 23.4497C2.54041 23.4497 1.19727 22.1066 1.19727
      20.4497H-0.802734C-0.802734 23.2111 1.43584 25.4497 4.19727 25.4497V23.4497ZM17.1722 23.4497H4.19727V25.4497H17.1722V23.4497ZM18.0658 24C18.0642 23.9977
      18.0634 23.9961 18.063 23.9953L16.2814 24.9041C16.3172 24.9743 16.3573 25.0429 16.4017 25.1094L18.0658 24ZM20.1973 27.1972L18.0658 24L16.4017 25.1094L18.5332
      28.3066L20.1973 27.1972ZM20.1973 27.1972L18.5332 28.3066C19.3248 29.4941 21.0697 29.4941 21.8614 28.3066L20.1973 27.1972ZM22.3287 24L20.1973 27.1972L21.8614
      28.3066L23.9928 25.1094L22.3287 24ZM22.3315 23.9953C22.3312 23.9961 22.3303 23.9976 22.3288 24L23.9928 25.1094C24.0372 25.0429 24.0773 24.9743 24.1132
      24.9041L22.3315 23.9953ZM36.1973 23.4497H23.2224V25.4497H36.1973V23.4497ZM39.1973 20.4497C39.1973 22.1066 37.8541 23.4497 36.1973 23.4497V25.4497C38.9587
      25.4497 41.1973 23.2111 41.1973 20.4497H39.1973ZM39.1973 4.44971V20.4497H41.1973V4.44971H39.1973ZM36.1973 1.44971C37.8541 1.44971 39.1973 2.79285 39.1973
      4.44971H41.1973C41.1973 1.68828 38.9587 -0.550293 36.1973 -0.550293V1.44971ZM4.19727 1.44971H36.1973V-0.550293H4.19727V1.44971Z"
        fill="black" mask="url(#path-1-inside-1_39189_44002)" />
         <text x="20%" y="13" font-family="Ubuntu" font-size="14px" dominant-baseline="middle"
        fill="${data.SvgTextColor}" text-anchor="middle">${data.Text}</text>
    </svg>`
b64 += btoa(unescape(encodeURIComponent(xml)));
let ctx = c1.getContext("2d");
ctx.beginPath();
ctx.rect(20, 80, 150, 100);
ctx.stroke();
img.onload = function(){
   ctx.drawImage(img, 30, 30);
};
img.src = b64;

canvas{
 border:1px solid;
}

<canvas id="c1" width="400" height="400"></canvas>

Answer 1

您可以旋转 canvas 而不是 svg:

img.onload = function(){
  ctx.save();
  ctx.rotate(rotationAngle*Math.PI/180);
  ctx.drawImage(img, 30, 30);
  ctx.restore();
};

参考HTML5 Canvas Rotate Image。

如何在不丢失一部分的情况下旋转 canvas 中的 svg 元素？

How to rotate svg element in canvas without losing some part of it?

html

javascript

css

svg

html5-canvas