SVG 轉換<g>標記為<img>包含 base64 PNG URI 的標簽（閱讀更多）</g>

Question

我遇到了一個有趣的問題（希望如此！）我注意到 SVG 有兩種“類型”

首先，我們有帶有 和 標簽的常規 SVG 文件，例如：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 841.89 1190.55" style="enable-background:new 0 0 841.89 1190.55;" xml:space="preserve">
     <g id="Background">
        <rect id="Color1" class="st3" width="840.94" height="1190.55"/>
        <g id="Texture" class="st4">
            <path class="st5" d="M843.67,410.13c-73.29 ...

其次，我們在圖像中嵌入了標簽，不知道該怎么稱呼它們，所以我只是將它們命名為“假 SVG”，例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3718" height="4899" viewBox="0 0 3718 4899">
  <image id="Lager_1" data-name="Lager 1" width="185.9" height="244.95000000000002" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh ...

我的問題是：有沒有什么流暢的方法可以將傳統的 SVG 轉換為“假” SVG？ （請告訴我他們是否有真實姓名）。 還要記住，我想保留分組，所以每個<g>都應該轉換為<image>標簽

我的想法：我正在考慮將傳統的 SVG 加載到<canvas>標簽中，它似乎能夠很好地理解傳統 SVG 中的<g>分組，並且從那里以某種方式將這些組單獨轉換為 Z745A1446A78ABB PNG URI，並將其重建為假 SVG，也許應該有一些庫可以提供幫助，有人有什么想法嗎？

Answer 1

我不確定這是否能准確回答你想要做的事情，但你可以這樣做：

<image id="something" href='data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" .../>' />

當編碼設置為data:image/svg+xml;utf8時，您可以將原始 SVG 作為字符串嵌入到 href 中。

這將在<image>標記中呈現 SVG，但不在 Base64 中（我無法使其正常工作，但可能有辦法）。

資料來源： https://css-tricks.com/probably-dont-base64-svg/

Answer 2

可以將帶有 DOM 中標簽的內聯 SVG 轉換為圖像數據 URL。 你只需要把它變成這樣的：

imageTag.src = 'data:image/svg+xml,' + window.escape(svgTag.outerHTML);

imageTag 版本不能在 SVG 中嵌入外部鏈接。 它還需要 SVG 標簽上的寬度和高度屬性，否則它不會在某些瀏覽器中顯示。 您也可以將此圖像繪制到 canvas 以對圖像進行光柵化，但正如評論所述，如果縮放只會使其更丑陋。

如果要將其轉換為 SVG 文件，則應將其添加為第一行，然后添加 svgTag 的 outerHTML。

<?xml version="1.0" encoding="UTF-8"?>

您可以使用 .svg 擴展名保存文件