Google Translate无法翻译SVG标签的解决方案咨询

Google翻译默认不会解析SVG内部的<text>标签内容，以下是几个可行的解决方案：

方法1：同步SVG文本到隐藏HTML元素，用JS同步翻译结果 #

核心思路是把SVG里的文本内容复制到页面上的隐藏HTML元素中，让Google翻译能抓取并翻译这些内容，之后通过JavaScript将翻译后的文本同步回SVG的<text>标签。

步骤：

• 在页面中添加隐藏容器，存放SVG文本的镜像内容
• 初始化时把SVG的文本内容同步到隐藏容器
• 监听Google翻译的语言切换事件，将翻译后的内容更新回SVG

示例代码：

<!-- 隐藏的文本容器 -->
<div id="svg-text-mirror" style="display: none;"></div>

<svg width="482" height="240" aria-label="ገበታ" style="overflow: hidden;">
    <!-- 原SVG内容 -->
    <g column-id="why does not translate?">
        <text id="svg-text-1" text-anchor="start" x="351" y="67.65" font-family="Arial" font-size="9" fill="#000000">why does not translate?</text>
    </g>
    <g column-id="hello">
        <text id="svg-text-2" text-anchor="start" x="351" y="82.65" font-family="Arial" font-size="9" fill="#000000">hello</text>
    </g>
</svg>

<script>
// 初始化同步文本到隐藏容器
function initSvgTextMirror() {
    const svgTexts = document.querySelectorAll('svg text');
    const mirrorContainer = document.getElementById('svg-text-mirror');
    
    svgTexts.forEach((textEl, index) => {
        const mirrorEl = document.createElement('span');
        mirrorEl.dataset.svgId = textEl.id;
        mirrorEl.textContent = textEl.textContent;
        mirrorContainer.appendChild(mirrorEl);
    });
}

// 监听翻译后的内容变化，同步回SVG
function syncTranslatedText() {
    const mirrorElements = document.querySelectorAll('#svg-text-mirror span');
    
    mirrorElements.forEach(mirrorEl => {
        const svgTextEl = document.getElementById(mirrorEl.dataset.svgId);
        if (svgTextEl) {
            svgTextEl.textContent = mirrorEl.textContent;
        }
    });
}

// 初始化
initSvgTextMirror();

// 监听Google翻译的语言切换（Google翻译会修改HTML的lang属性）
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.attributeName === 'lang') {
            setTimeout(syncTranslatedText, 500); // 延迟确保翻译完成
        }
    });
});

observer.observe(document.documentElement, { attributes: true });
</script>

方法2：使用<foreignObject>嵌入HTML文本 #

SVG的<foreignObject>标签允许嵌入HTML内容，Google翻译会正常解析这些HTML里的文本。这种方法适合需要排版灵活的文本内容。

示例代码：

<svg width="482" height="240" aria-label="ገበታ" style="overflow: hidden;">
    <rect x="0" y="0" width="482" height="240" fill="#f5f5f5"></rect>
    <!-- 使用foreignObject嵌入HTML -->
    <foreignObject x="351" y="60" width="120" height="20">
        <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 9px;">
            why does not translate?
        </div>
    </foreignObject>
    <foreignObject x="351" y="75" width="120" height="20">
        <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 9px;">
            hello
        </div>
    </foreignObject>
    <!-- 保留原图形元素 -->
    <circle cx="343.5" cy="64.5" r="4.5" fill="#990099"></circle>
    <circle cx="343.5" cy="79.5" r="4.5" fill="#ffff00"></circle>
</svg>

注意：<foreignObject>里的HTML必须声明xmlns="http://www.w3.org/1999/xhtml"，确保浏览器正确解析。

方法3：预生成多语言SVG（适合静态内容） #

如果网站内容是静态的，可以提前为每种支持的语言生成对应的SVG文件，然后根据用户的语言偏好直接加载对应的版本。

示例：

// 根据页面lang属性加载对应SVG
const pageLang = document.documentElement.lang || 'en';
const svgUrl = `./chart-${pageLang}.svg`;

fetch(svgUrl)
    .then(response => response.text())
    .then(svgContent => {
        document.getElementById('chart-container').innerHTML = svgContent;
    });

内容的提问来源于stack exchange，提问作者elle0087