如何修改SVG格式横幅中的文字内容

方法一：直接编辑SVG源文件（适合未转曲的SVG） #

SVG本质是XML格式的文本文件，你可以直接用任意纯文本编辑器打开修改：

• 打开SVG文件后，搜索 <text> 标签，所有可见的可编辑文字都包裹在 <text> 和 </text> 标签对之间
• 直接替换标签中间的文字内容即可，比如把 <text x="20" y="30" fill="#fff">旧横幅文字</text> 改成 <text x="20" y="30" fill="#fff">新横幅文字</text>
• 如果需要调整文字样式，可以同步修改<text>标签的属性：改颜色调fill属性、改字号调font-size、改字体调font-family、调整位置调x和y坐标值

方法二：矢量编辑软件修改（适合文字已转曲的SVG） #

如果你打开SVG文件后找不到<text>标签，说明原文件里的文字已经被转成矢量路径（转曲），无法直接编辑文字内容：

• 用矢量处理软件（Inkscape、Adobe Illustrator、Figma 等均可）打开SVG文件
• 删除原有文字对应的矢量路径，添加你需要的新文字，调整样式匹配原有设计
• 重新导出为SVG格式即可

方法三：动态修改网页内嵌SVG的文字 #

如果你的SVG是直接内嵌在HTML页面中使用的，可以通过JS代码动态修改文字内容，示例代码如下：

// 给目标<text>标签加id="banner-text"后执行以下代码
document.getElementById('banner-text').textContent = '你要替换的新文字';

注意事项 #

• 修改前请备份原SVG文件，避免操作失误导致文件损坏
• 如果修改后文字显示不全，可适当调整<text>的坐标属性或者字号，适配横幅的显示区域

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