直接把svg的文本顯示在img上

分享和讨论Javascript相关的话题
回复
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3406
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 141 次
被圈友点赞: 161 次
联系:

直接把svg的文本顯示在img上

帖子 ejsoon »

代码: 全选

要將SVG的文本嵌入到`<img>`的`src`中,可以將SVG代碼轉換為Base64編碼,然後將這個編碼作為`src`的值。這樣可以讓`<img>`元素顯示SVG圖像。

具體步驟如下:

1. 把你的SVG內容保存為一個字符串。
2. 使用`encodeURIComponent()`對SVG內容進行URL編碼。
3. 將編碼後的SVG字符串嵌入到`data:image/svg+xml;base64,`中(這會將其轉換為Base64編碼)。

例如:

```html
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zY2h...(你的Base64編碼)" alt="SVG Image">
```

你可以使用JavaScript來進行這些步驟,這樣會比較方便自動化處理。

```javascript
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>`;
const encodedSvg = encodeURIComponent(svg);
const img = document.createElement('img');
img.src = `data:image/svg+xml,${encodedSvg}`;
document.body.appendChild(img);
```

這樣,SVG圖像會顯示在頁面上。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 8 访客