Блог

Главная - Вопросы по программированию - SVG с относительными координатами друг к другу

SVG с относительными координатами друг к другу

#html #svg

#HTML #svg

Вопрос:

Я получил следующий svg:

 <svg>
    <text x="10" y="15">
        <tspan dx="0">Text 1</tspan>
        <tspan dx="15">Text 2</tspan>
        <tspan dx="15">Text 3</tspan>
        <tspan dx="15">Text 4</tspan>
    </text>
    <text x="30" y="30">
        <tspan dx="0">Text 5</tspan>
        <tspan dx="15">Text 6</tspan>
        <tspan dx="15">Text 7</tspan>
        <tspan dx="15">Text 8</tspan>
    </text>
    <text x="50" y="45">
        <tspan dx="0">Text 1</tspan>
        <tspan dx="15">Text 2</tspan>
        <tspan dx="15">Text 3</tspan>
        <tspan dx="15">Text 4</tspan>
    </text>
    <text x="10" y="60">
        <tspan dx="0">Text 5</tspan>
        <tspan dx="15">Text 6</tspan>
        <tspan dx="15">Text 7</tspan>
        <tspan dx="15">Text 8</tspan>
    </text>
</svg>

Это всего лишь пример, и он станет чрезвычайно сложным. Как вы можете видеть, мне приходится каждый раз изменять значения x и y для новой строки, чтобы правильно расположить ее.

Возможно ли сделать эти значения относительными? Сетка всегда будет выглядеть одинаково, если они относительны, я могу установить их один раз или поместить их в переменную и скопировать, вставить все.

Например, что-то вроде этого (я знаю, что это не работает / выглядит одинаково, просто чтобы продемонстрировать мою идею)

 <svg>
    <text dx="15" dy="20">
        <tspan dx="15">Text 1</tspan>
        <tspan dx="15">Text 2</tspan>
        <tspan dx="15">Text 3</tspan>
        <tspan dx="15">Text 4</tspan>
    </text>
    <text dx="15" dy="20">
        <tspan dx="15">Text 5</tspan>
        <tspan dx="15">Text 6</tspan>
        <tspan dx="15">Text 7</tspan>
        <tspan dx="15">Text 8</tspan>
    </text>
    <text dx="15" dy="20">
        <tspan dx="15">Text 1</tspan>
        <tspan dx="15">Text 2</tspan>
        <tspan dx="15">Text 3</tspan>
        <tspan dx="15">Text 4</tspan>
    </text>
    <text dx="15" dy="20">
        <tspan dx="15">Text 5</tspan>
        <tspan dx="15">Text 6</tspan>
        <tspan dx="15">Text 7</tspan>
        <tspan dx="15">Text 8</tspan>
    </text>
</svg>

Комментарии:

1. Если вы работаете с большими объемами текста, вам будет лучше в мире HTML, а не SVG.

2. Это правда, но я не хочу, чтобы это выглядело как заполнение ключевых слов для Google, потому что там будет несколько повторяющихся коротких слов

3. Вы не можете иметь одинаковые относительные смещения в каждой строке, если смещение время от времени сбрасывается (как это происходит между третьей и четвертой строками в вашем примере).

4. @PaulLeBeau ну, хорошо. Но это не имеет значения. Он будет помещен внутрь оболочки, и я могу просто сдвинуть его влево с тем же эффектом. Но как бы вы сделали относительное смещение y?

5. Ну, вы можете использовать dy="15" для новой строки, если все это находится внутри одного и того же <text> элемента. Но вам всегда нужно будет настроить начальную позицию X с x помощью или dx (или transform )

Метки: