时间戳

首页 > 解决方案 > 如何编辑 SVG 文件中的文本？（不是以编程方式）

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

问题描述

我正在尝试编辑在我最近下载的网站模板中找到的 .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 文件中的文本吗？

标签： htmlsvgwebvector-graphics

解决方案

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

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 画布非常小，因此大部分文本不可见，除非您overflow:visible为 svg 添加。

推荐阅读