canvas 上的 svg 元素动态着色
[英]Dynamically color svg elements on canvas
问题描述
我正在尝试将这个棋子绘制到 Canvas 元素上，并且我想给它一个自定义填充颜色。
我尝试了以下方法将 svg 添加到 DOM 并且它有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
window.onload = function(){
const color = "#02B09F"
const svg_string = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"><g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"><path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:${color}; stroke-linejoin:miter;" id="path6570"/><path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/><path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:${color}; stroke:${color};"/><path d="M 20,8 L 25,8" style="fill:none; stroke:${color}; stroke-linejoin:miter;"/><path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/><path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/></g></svg>`
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
document.querySelector('body').appendChild(doc.firstChild)
}
</script>
</html>
但是将 drawImage 与 doc.firstChild 一起使用不起作用，它给了我以下错误：
CanvasRenderingContext2D.drawImage：参数 1 无法转换为以下任何一种：HTMLImageElement、SVGImageElement、HTMLCanvasElement、HTMLVideoElement、ImageBitmap。
编码：
const color = "#02B09F"
const svg_string = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"><g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"><path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:${color}; stroke-linejoin:miter;" id="path6570"/><path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/><path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:${color}; stroke:${color};"/><path d="M 20,8 L 25,8" style="fill:none; stroke:${color}; stroke-linejoin:miter;"/><path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/><path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/></g></svg>`
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
let canvas = document.querySelector('canvas');
canvas.width = 100;
canvas.height = 100;
let cx = canvas.getContext('2d');
cx.drawImage(doc.firstChild, 0, 0)
知道如何修复它，或者如果您知道使用 javascript 为 SVG 着色的更好方法
1 个解决方案
解决方案1
0 2022-01-15 10:54:47
只需制作 function 并更换 colors。 测试代码在这里
function renderChess(white = '#FFFFFF', black = '#000000'){
return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"> <g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:' + black + '; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"> <path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:' + black + '; stroke-linejoin:miter;" id="path6570"/> <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:' + black + ';fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/> <path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:' + black + '; stroke:' + black + ';"/> <path d="M 20,8 L 25,8" style="fill:none; stroke:' + black + '; stroke-linejoin:miter;"/> <path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:' + white + ';"/> <path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:' + white + ';"/> </g> </svg>';
}
window.onload = function(){
const color = "#02B09F"
const svg_string = renderChess(color, 'black');
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
document.querySelector('body').appendChild(doc.firstChild)
}
动态创建SVG元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.