https://g.co/gemini/share/0988d1179bb5
以下是如何使用 JavaScript 從字型檔中提取文字，並將指定文字儲存為 SVG 檔案的步驟：
1. 載入字型檔
您可以使用 FontFace API 來載入字型檔。首先，您需要創建一個 FontFace 物件，並指定字型名稱和檔案路徑。然後，您可以使用 document.fonts.add() 方法將字型添加到文檔中。
JavaScript
const font = new FontFace('MyFont', 'url(path/to/font.woff2)');
document.fonts.add(font);
2. 提取文字
您可以使用 Canvas API 來提取字型中的文字。首先，您需要創建一個 Canvas 元素，並將其繪製環境設置為 2D。然後，您可以使用 fillText() 方法將文字繪製到 Canvas 上。
JavaScript
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '48px MyFont';
context.fillText('Hello, world!', 0, 0);
3. 將文字轉換為 SVG
您可以使用 Canvas 的 toDataURL() 方法將文字轉換為 Base64 編碼的 PNG 圖像。然後，您可以使用 SVG 的 image 元素將 PNG 圖像嵌入到 SVG 中。
JavaScript
const dataURL = canvas.toDataURL();
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', dataURL);
svg.appendChild(image);
4. 將 SVG 儲存為檔案
您可以使用 Blob 和 URL API 將 SVG 儲存為檔案。首先，您需要將 SVG 轉換為字串。然後，您可以創建一個包含 SVG 字串的 Blob 物件。最後，您可以使用 URL.createObjectURL() 方法創建一個指向 Blob 物件的 URL，並將其設置為下載連結的 href 屬性。
JavaScript
const svgString = new XMLSerializer().serializeToString(svg);
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'text.svg';
link.click();
完整程式碼
以下是完整的程式碼：
JavaScript
const font = new FontFace('MyFont', 'url(path/to/font.woff2)');
document.fonts.add(font);
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '48px MyFont';
context.fillText('Hello, world!', 0, 0);
const dataURL = canvas.toDataURL();
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', dataURL);
svg.appendChild(image);
const svgString = new XMLSerializer().serializeToString(svg);
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'text.svg';
link.click();
注意事項
- 您需要將
path/to/font.woff2替換為實際的字型檔路徑。 - 您需要確保字型檔包含您要提取的文字。
- 提取的文字將以 PNG 圖像的形式嵌入到 SVG 中。如果您需要將文字轉換為 SVG 路徑，您可以使用其他工具或函式庫。
