476
社区成员
发帖
与我相关
我的任务
分享关于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样式
以下是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样式
...全文
请发表友善的回复…
发表回复
