如何在 canvas 中旋转 svg 元素而不丢失部分元素？

Question

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

当没有应用旋转时，它打印得很好。我想通过使用旋转这个（基于数字变量）

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

当我这样做时，有趣的是矩形的某些部分被切割如下（在这种情况下，rotationAngle 为 10 作为示例）

如何在不裁剪且不更改 position 的情况下旋转此 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 旋转图像以供参考。