如何在SVG文件中编辑文本？ （不是以编程方式）

Question

我正在尝试编辑在我最近下载的网站模板中找到的.svg文件。
文件代码是这样的：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="10px" viewBox="0 0 52 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Stacked</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="12" font-family="ProximaNova-Bold, Proxima Nova" font-weight="bold">
        <text id="Stacked" fill="#000000">
            <tspan x="0" y="9">Stacked</tspan>
        </text>
    </g>
</svg>

我想要的是简单地更改文本。我希望通过更改您在文件末尾看到的TSPAN标记的内部文本来实现。但是，即使我从SVG编辑器更改了文本，也没有任何反应。

所以，我的问题是：实现我的目标的正确方法是什么？甚至可以更改SVG文件中的文本吗？

Answer 1

这是您的代码，它应该可以工作（请运行代码）：

svg{border:1px solid;overflow:visible}

<svg width="52px" height="10px" viewBox="0 0 52 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Stacked</title>
    <desc>Created with Sketch.</desc>
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="12" font-family="ProximaNova-Bold, Proxima Nova" font-weight="bold">
        <text id="Stacked" fill="#000000">
            <tspan x="0" y="9">Stacked edited</tspan>
        </text>
    </g>
</svg>

作为观察：SVG画布很小，因此除非您为svg添加overflow:visible，否则文本的很大一部分是不可见的。