关于Html5的svg转canvas问题
问题
-
svg转canvas怎么包含外部样式文件（css）
以下是html
<!DOCTYPE HTML> <html> <body> <link rel="stylesheet" type="text/css" href="./style.css" /> <div id="svgTest"> <svg width="100px" height="100px"> <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="2"/> </svg> </div> <canvas id="myCanvas" width="100px" height="100px"></canvas> <button onclick="svgToCanvas()">Test</button> <script> function svgToCanvas() { var svgString = new XMLSerializer().serializeToString(document.querySelector('svg')); var img = new Image(); var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8," }); var DOMURL = self.URL || self.webkitURL || self; var url = DOMURL.createObjectURL(svg); img.src = url; img.onload = function () { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, 100, 100); } }; </script> </body> </html>以下是css
.circle{fill:red}效果：
将svg，circle的class="circle"换成fill="red"则可以加载
<circle fill="red" cx="50" cy="50" r="40" stroke="black" stroke-width="2"/>
效果：
由于工程比较大，图形很多，必须要用class。那么svg转canvas怎么包含css样式
