У меня есть текст 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.
Я не уверен, что ты имеешь в виду. Это SVG-текст.
вы делаете это, например, <h1>
или <p>
(вместо текстового элемента внутри SVG), и вы можете легко обработать его с помощью медиа-запроса
За исключением того, что он имеет линейный градиент, который я не могу воспроизвести в тексте. SVG лучше всего подходит для этого элемента.
вы можете воспроизвести его с помощью CSS (у вас, вероятно, будет меньше поддержки), но даже если вы не можете, вы можете по крайней мере поместить первый текст снаружи, где у вас нет никакого градиента, и иметь только второй текст как единственный элемент SVG и настроить SVG
Интересная идея, но я знаю, что могу изменить ее с помощью javascript. Я просто должен понять, как это сделать. Проще всего было бы, конечно, css, но ваше решение связано с неизвестными проблемами, потому что оно расположено внутри основного заголовка, и я думаю, что это было бы сложно с элементом, отличным от svg.
не очень сложно, вы делаете это: jsfiddle.net/jayv2Ltn/1 и вы можете легко обрабатывать элемент с помощью CSS. Или вы делаете все на чистом CSS: jsfiddle.net/jayv2Ltn/2
вы можете использовать идентификатор элемента 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 - я просто смотрел на преобразования, и это похоже на самое быстрое и простое решение. Я дам вам знать, что происходит.
почему вы просто не считаете текст HTML?