我希望能夠將具有動態值（顏色）的 svg 繪制到畫布上。我試過制作 svg react 組件，所以我可以將顏色傳遞給 svg，但我很困惑如何將 react svg 組件繪制到畫布上。
PS最好將svg存盤在單獨的檔案中。
作業靜態 svg 示例：
import ant_skin_url from '../../assets/AntSkin.svg';
const ant_skin = new Image();
ant_skin.src = ant_skin_url;
context.drawImage(
ant_skin,
i * width_cell,
ii * height_cell,
width_cell,
height_cell,
);
React svg 組件，但對如何處理輸出感到困惑（在畫布上繪制）：
export const AntSkin = (color) =>
<svg>
...
</svg>
uj5u.com熱心網友回復：
由于您不想渲染 svg 而是將其放入畫布中，因此從.svg匯入不會有太大幫助。
您可以創建一個組件：
- 接收顏色作為道具
- 將 svg 內容作為字串
在掛載時，它結合了 svg 字串和顏色，將其轉換為 base64（這是從.svg匯入時 webpack 所做的）并以與您相同的方式提供畫布。
這是它的樣子
import { useEffect, useMemo, useRef } from "react";
export const Icon = ({ color }) => {
const ref = useRef();
const svg = useMemo(
() => `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<g>
<path color="${color}" d="M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3 c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z"/>
<path color="${color}" d="M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z"/>
<path color="${color}" d="M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z"/>
<path color="${color}" d="M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6 c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z"/>
<path color="${color}" d="M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z"/>
<path color="${color}" d="M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7 c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z"/>
<path color="${color}" d="M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7 C20.6,84.2,23.2,86.3,26.2,88.2z"/>
<path color="${color}" d="M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6 c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z"/>
</g>
</svg>`,
[color]
);
useEffect(() => {
const image = new Image();
const context = ref.current.getContext("2d");
image.src = `data:image/svg xml;base64,${window.btoa(svg)}`;
image.onload = () => {
context.drawImage(image, 0, 0);
};
}, [svg]);
return <canvas ref={ref} width="200" height="200" />;
};
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/465881.html
標籤：javascript 反应 svg 帆布
上一篇：cssrotate在使用SVG剪輯路徑或蒙版時引入輪廓
下一篇：如何使用svg居中矩形框