Изменить координаты xy текста svg с помощью медиа-запроса в css или javascript?

У меня есть текст svg, встроенный в мою домашнюю страницу. Есть основной заголовок и подзаголовок (см. ниже). Я хочу изменить координаты x-y подзаголовка, который использует tagline_class, в медиа-запросе.

<div class = "logo">

  <svg viewBox = "0 0 240 220" xmlns = "http://www.w3.org/2000/svg">

        <defs>
            <linearGradient id = "MyGradient">
            <stop offset = "5%"  stop-color = "rgb(71,164,71)"/>
            <stop offset = "95%" stop-color = "white"/>
        </linearGradient>
    </defs>

    <text x = "0" y = "25" class = "logo_class three">Main Head</text>

    <text id = "subHead" fill = "url(#MyGradient)" x = "24" y = "33" width = "33" height = "24" class = "tagline_class fadeIn animate_behind">subHead</text>

    </svg>
</div>

Я знаю, что могу изменить элементы svg с помощью javascript, но было бы проще, если бы я мог использовать css.

Могу ли я изменить координаты x-y подзаголовка (tagline_class), используя только css, в медиа-запросе?

Если нет, я могу использовать этот javascript:

document.getElementById("jqx-chart-axis-text").setAttribute("x", "10");

но я не понимаю, следует ли вызывать javascript из медиа-запроса или медиа-запроса, используемого в коде javascript. Я также не знаю, какое событие использовать для изменения координат svg.

Подводя итог, как изменить координаты xy текста svg с помощью медиа-запроса в css или javascript.

почему вы просто не считаете текст HTML?

Temani Afif 14.07.2019 01:19

Я не уверен, что ты имеешь в виду. Это SVG-текст.

RTC222 14.07.2019 01:20

вы делаете это, например, <h1> или <p> (вместо текстового элемента внутри SVG), и вы можете легко обработать его с помощью медиа-запроса

Temani Afif 14.07.2019 01:21

За исключением того, что он имеет линейный градиент, который я не могу воспроизвести в тексте. SVG лучше всего подходит для этого элемента.

RTC222 14.07.2019 01:22

вы можете воспроизвести его с помощью CSS (у вас, вероятно, будет меньше поддержки), но даже если вы не можете, вы можете по крайней мере поместить первый текст снаружи, где у вас нет никакого градиента, и иметь только второй текст как единственный элемент SVG и настроить SVG

Temani Afif 14.07.2019 01:24

Интересная идея, но я знаю, что могу изменить ее с помощью javascript. Я просто должен понять, как это сделать. Проще всего было бы, конечно, css, но ваше решение связано с неизвестными проблемами, потому что оно расположено внутри основного заголовка, и я думаю, что это было бы сложно с элементом, отличным от svg.

RTC222 14.07.2019 01:28

не очень сложно, вы делаете это: jsfiddle.net/jayv2Ltn/1 и вы можете легко обрабатывать элемент с помощью CSS. Или вы делаете все на чистом CSS: jsfiddle.net/jayv2Ltn/2

Temani Afif 14.07.2019 01:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
904
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы можете использовать идентификатор элемента svg также в css:

<div class = "logo">
<style>
    @media(max-width: 500px){
        #subHead{
            transform: translateX(-20px);
        }
    }
    @media(min-width: 1000px){
        #subHead{
            transform: translateX(20px);
        }
    }
</style>
<svg viewBox = "0 0 240 220" xmlns = "http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id = "MyGradient">
            <stop offset = "5%"  stop-color = "rgb(71,164,71)"/>
            <stop offset = "95%" stop-color = "white"/>
        </linearGradient>
    </defs>

    <text x = "0" y = "25" class = "logo_class three">Main Head</text>

    <text id = "subHead" fill = "url(#MyGradient)" x = "24" y = "33" width = "33" height = "24" class = "tagline_class fadeIn animate_behind">subHead</text>

    </svg>
</div>

Хороший комментарий, @ZamarianPatrick - я просто смотрел на преобразования, и это похоже на самое быстрое и простое решение. Я дам вам знать, что происходит.

RTC222 14.07.2019 01:46

Другие вопросы по теме