none
关于Html5的svg转canvas问题 RRS feed

  • 问题

  • 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样式

    2017年9月12日 8:11

全部回复

  • 你好,

    看起来这个问题和IE并没有什么联系,我建议你去一些和HTML5相关的其他论坛发帖。

    2017年9月13日 2:46
    版主