将 SVG 转换为画布 PNG 删除 ios 上的transform3d

Question

我正在尝试将 svg 加载到画布上，它在 chrome 和 firefox 上运行良好，但在 webkit 上却很混乱。我尝试更改 3d 变换的位置但无济于事。有人有关于如何修复的经验或建议吗？

请在下面找到一个简化的测试来验证该问题。 Webkit 错误：https://bugs.webkit.org/show_bug.cgi?id=273939

谢谢 slyi

const svgString = document.querySelector("#input_svg").value;
            
const div = document.createElement("div");
div.innerHTML = svgString;
const svgs = div.querySelectorAll("svg");


const convertButton = document.querySelector("#btn_convert");

const imageTest = document.querySelector("#imageTest");
const canvasTest = document.querySelector("#canvasTest");
imageTest.innerHTML=svgString;
const img = document.createElement("img");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
const URL = window.URL || window.webkitURL || window;

convertButton.onclick = async () => {        
  var imageSrc = await svgToBase64(svgs[0]);
  canvasTest.src=imageSrc;

};
    
async function svgToBase64(svg) {
  const width = svg.getAttribute("width");
  const height = svg.getAttribute("height");
  
  canvas.width = width;
  canvas.height = height;

  const data = new XMLSerializer().serializeToString(svg);
  console.log(data)
  const blob = new Blob([data], {
      type: 'image/svg+xml'
  });
  console.log(blob)
  var url = URL.createObjectURL(blob);

  return new Promise((resolve) => {
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      URL.revokeObjectURL(url);
      resolve(canvas.toDataURL("image/png"));
    }
    img.src = url;
    
  });
}

body {
  background: #fff;
}

<h1>Webkit: SVG to Canvas lost transform3d</h1>
<br />
<div >
<div id="imageTest" />
<br/>

</div>
<button id="btn_convert">Convert SVG to canvas PNG </button>
<br />
<br />
<img id="canvasTest"   />
<textarea  id="input_svg" style="visibility:collapse;">
    <svg version= "1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" id="chess">
        <defs>  
          <style>   
            #chess {      
                transform:perspective(500px) rotateX(65deg) ;   
            }
            .chessPattern {
              fill:  red;
            }
          </style>
          <pattern id="pattern-chess" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" >
            <rect class="chessPattern" x="0" width="20" height="20" y="0" />
            <rect class="chessPattern" x="20" width="20" height="20" y="20" />
          </pattern>
        </defs> 
          <g id="group" >
            <rect width="200" height="200" fill="url(#pattern-chess)"  />
          </g>
        </svg>
</textarea>

CSS Transform3d 在 webkit 上丢失了

Answer 1

这个 webkit 问题可以通过内联图像来简化。 根据 webkit bug，SVG 不支持 CSS3 透视图 https://bugs.webkit.org/show_bug.cgi?id=273939

Simon Fraser (smfr) 2024-05-09 10:44:31 PDT WebKit 不支持 3d “扁平化”绘图中的转换函数（例如转换为画布）。我们的 底层图形框架不支持这一点。

<div style="width: 400;  overflow: hidden;position: absolute;top: -150px; left:0px" >
    <div style="position: absolute;top: 175px;" >inline svg</div>
    <svg  xmlns="http://www.w3.org/2000/svg" width="400" height="400"  viewBox="0 0 400 400" style="transform:perspective(220px)  rotateX(87deg) "  >
        <defs>
            <pattern id="pattern-chess" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M0 0h10v10H0zM10 10h10v10H10z"/>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#pattern-chess)"/>
    </svg>    
</div>
<div style="overflow: hidden;width: 400; position: absolute;top: -150px; left:450px" >
    <div style="position: absolute;top: 175px;">img svg</div>
    <img   src='data:image/svg+xml;utf8,
    <svg  xmlns="http://www.w3.org/2000/svg" width="400" height="400" style="transform:perspective(220px) rotateX(87deg);"  >
        <defs>
            <pattern id="pattern-chess" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M0 0h10v10H0zM10 10h10v10H10z"/>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(%23pattern-chess)"/>
    </svg> '/>
</div>