Как редактировать текст в файле SVG? (не программно) - PullRequest
Новая
       34

Как редактировать текст в файле SVG? (не программно)

0 голосов
/ 30 августа 2018

Я пытаюсь отредактировать файл .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?

1 Ответ

0 голосов
/ 30 августа 2018

Это ваш код, и он должен работать (пожалуйста, запустите код): 

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.

...