Смена картинки svg при наведении курсора без задержки/альтернатива

Torawhite · February 9, 2015

Здравствуйте! Есть код типа:

HTML:

<a></a>

CSS:

a {display:block;width: 50px;height: 100px;background: #2b2b2b url(/some_image1.svg) no-repeat;background-size: contain;background-position: left;}a:hover {background: #000000 url(/some_image2.svg) no-repeat;}

Суть в том, что картинка svg - простая однотонная иконка с прозрачным фоном, при наведении нужно изменить её цвет, но если это реализовать с помощью смены картинки на такую же, только другого цвета, смена происходит с задержкой. Изображение исчезает, а через секунду появляется другое. Так происходит только первый раз, потом картинка, видимо, попадает в кэш браузера и смена происходит без задержки, но задержка при первой смене бросается в глаза. Картинка имеет вес всего 1кб, но тем не менее задержка происходит. Поместить две иконки в один svg и изменять просто позицию, как с png, так понимаю не выйдет, так как svg не имеет разрешения. Находил варианты с фильтром fill, но там реализация не в качестве background, а отдельно, причём в теге <svg>. Как можно решить данную проблему?

Yazon_Nile · February 9, 2015

старый "дедовской метод" гласил, что нужно создать пустой див с классом preloader

и через множественный бекграунд задать не него все картинки, которые нужно подгрузить заранее.

И сам див вынести абсолютом далеко-далеко

satantx · February 9, 2015

google: color svg css

Torawhite · February 9, 2015

старый "дедовской метод" гласил, что нужно создать пустой див с классом preloader
и через множественный бекграунд задать не него все картинки, которые нужно подгрузить заранее.

И сам див вынести абсолютом далеко-далеко

Так просто и лаконично! Проблема решилась! Спасибо!

google: color svg css

Был там, но для моего варианта решения не нашёл. Спасибо, что отозвались!

ows.nightwolf · February 9, 2015

У svg изображения всегда задан базовый размер, так что позиционирование svg фона происходит так же как и обычной картинки. Пример:

some_image1.svg:
В теге svg заданы базовая ширина и высота.
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" >  <rect style="fill:blue" x="0" y="0" width="50" height="100"/>  <rect style="fill:red" x="50" y="0" width="50" height="100"/></svg>
index.html:
Свойство background-size: auto 100%; чтобы фоновое изображение растягивалось на всю высоту контейнера, и при этом не изменяло своих пропорций. Изменение его положения регулируется как обычно свойством background-position.
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    a {      display:block;      width: 50px;      height: 100px;      background: #2b2b2b url(some_image1.svg) no-repeat;      background-size: auto 100%;      background-position: left;    }    a:hover {      background-position: right;    }  </style></head><body>  <a href="#"></a></body></html>

Torawhite · February 9, 2015

У svg изображения всегда задан базовый размер, так что позиционирование svg фона происходит так же как и обычной картинки. Пример:
some_image1.svg:
В теге svg заданы базовая ширина и высота.
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" >  <rect style="fill:blue" x="0" y="0" width="50" height="100"/>  <rect style="fill:red" x="50" y="0" width="50" height="100"/></svg>
index.html:
Свойство background-size: auto 100%; чтобы фоновое изображение растягивалось на всю высоту контейнера, и при этом не изменяло своих пропорций. Изменение его положения регулируется как обычно свойством background-position.
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    a {      display:block;      width: 50px;      height: 100px;      background: #2b2b2b url(some_image1.svg) no-repeat;      background-size: auto 100%;      background-position: left;    }    a:hover {      background-position: right;    }  </style></head><body>  <a href="#"></a></body></html>

Но Вы же указываете базовый размер svg-изображения в самом теге <svg>, по аналогии с тегом <img>, но я имею ввиду, когда, например, у меня есть svg-картинка, которая включает в себя 2 иконки и расположены они по оси Y. Размер в adobe illustrator при сохранении установлен: 50px - ширина и 100px - высота. Картинка должна находится у левого края блока и иметь background-position: 0 0; а при наведении background-position: 0 -50px; - получаем нижнюю часть картинки

ows.nightwolf · February 9, 2015

Но Вы же указываете базовый размер svg-изображения в самом теге <svg>, по аналогии с тегом <img>, но я имею ввиду, когда, например, у меня есть svg-картинка, которая включает в себя 2 иконки и расположены они по оси Y. Размер в adobe illustrator при сохранении установлен: 50px - ширина и 100px - высота. Картинка должна находится у левого края блока и иметь background-position: 0 0; а при наведении background-position: 0 -50px; - получаем нижнюю часть картинки

Возможно я ошибаюсь, но мне кажется что вы не пробовали открывать вашу svg картинку в текстовом редакторе? Попробуйте, вы увидите что она состоит из тегов, как и html страница. И вот в самой вашей картинке иллюстратор должен поставить в тег svg соответствующие ширину и высоту. По этому по приведенному мной примеру выше вы можете позиционировать ее свойством background-position как обычное растровое изображение.

P.S. Размеры изображения в любом векторном файле (как и в растровом) обязательно должны быть (и он равны размеру холста). Отличие холста в растровых изображениях от векторных в том что в растровых все что было нарисовано за границами холста безвозвратно теряется, а в векторных сохраняется. А так какие-либо размеры "видимого пространства" должны иметь все типы изображений.

Edited February 9, 2015 by ows.nightwolf

Torawhite · February 10, 2015

Но Вы же указываете базовый размер svg-изображения в самом теге <svg>, по аналогии с тегом <img>, но я имею ввиду, когда, например, у меня есть svg-картинка, которая включает в себя 2 иконки и расположены они по оси Y. Размер в adobe illustrator при сохранении установлен: 50px - ширина и 100px - высота. Картинка должна находится у левого края блока и иметь background-position: 0 0; а при наведении background-position: 0 -50px; - получаем нижнюю часть картинки

Возможно я ошибаюсь, но мне кажется что вы не пробовали открывать вашу svg картинку в текстовом редакторе? Попробуйте, вы увидите что она состоит из тегов, как и html страница. И вот в самой вашей картинке иллюстратор должен поставить в тег svg соответствующие ширину и высоту. По этому по приведенному мной примеру выше вы можете позиционировать ее свойством background-position как обычное растровое изображение.
P.S. Размеры изображения в любом векторном файле (как и в растровом) обязательно должны быть (и он равны размеру холста). Отличие холста в растровых изображениях от векторных в том что в растровых все что было нарисовано за границами холста безвозвратно теряется, а в векторных сохраняется. А так какие-либо размеры "видимого пространства" должны иметь все типы изображений.

Вы правы, не открывал. Сейчас открыл:

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

Иллюстратор ничего не проставил (x="0px" y="0px) Спасибо за наводку, теперь буду знать, что размеры нужно проставлять вручную.

ows.nightwolf · February 10, 2015

Но Вы же указываете базовый размер svg-изображения в самом теге <svg>, по аналогии с тегом <img>, но я имею ввиду, когда, например, у меня есть svg-картинка, которая включает в себя 2 иконки и расположены они по оси Y. Размер в adobe illustrator при сохранении установлен: 50px - ширина и 100px - высота. Картинка должна находится у левого края блока и иметь background-position: 0 0; а при наведении background-position: 0 -50px; - получаем нижнюю часть картинки

Возможно я ошибаюсь, но мне кажется что вы не пробовали открывать вашу svg картинку в текстовом редакторе? Попробуйте, вы увидите что она состоит из тегов, как и html страница. И вот в самой вашей картинке иллюстратор должен поставить в тег svg соответствующие ширину и высоту. По этому по приведенному мной примеру выше вы можете позиционировать ее свойством background-position как обычное растровое изображение.
P.S. Размеры изображения в любом векторном файле (как и в растровом) обязательно должны быть (и он равны размеру холста). Отличие холста в растровых изображениях от векторных в том что в растровых все что было нарисовано за границами холста безвозвратно теряется, а в векторных сохраняется. А так какие-либо размеры "видимого пространства" должны иметь все типы изображений.

Вы правы, не открывал. Сейчас открыл:
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
Иллюстратор ничего не проставил (x="0px" y="0px) Спасибо за наводку, теперь буду знать, что размеры нужно проставлять вручную.

Только имейте в виду, что атибуты x и y отвечают за расположение элемента (я правда не знаю для чего они нужны в корневом svg, там можно любые цифры поставить и вроде ничего не должно изменится), а для задания ширины и высоты используются атрибуты width и height (вручную допишите).

Torawhite · February 11, 2015

Но Вы же указываете базовый размер svg-изображения в самом теге <svg>, по аналогии с тегом <img>, но я имею ввиду, когда, например, у меня есть svg-картинка, которая включает в себя 2 иконки и расположены они по оси Y. Размер в adobe illustrator при сохранении установлен: 50px - ширина и 100px - высота. Картинка должна находится у левого края блока и иметь background-position: 0 0; а при наведении background-position: 0 -50px; - получаем нижнюю часть картинки

Возможно я ошибаюсь, но мне кажется что вы не пробовали открывать вашу svg картинку в текстовом редакторе? Попробуйте, вы увидите что она состоит из тегов, как и html страница. И вот в самой вашей картинке иллюстратор должен поставить в тег svg соответствующие ширину и высоту. По этому по приведенному мной примеру выше вы можете позиционировать ее свойством background-position как обычное растровое изображение.
P.S. Размеры изображения в любом векторном файле (как и в растровом) обязательно должны быть (и он равны размеру холста). Отличие холста в растровых изображениях от векторных в том что в растровых все что было нарисовано за границами холста безвозвратно теряется, а в векторных сохраняется. А так какие-либо размеры "видимого пространства" должны иметь все типы изображений.

Вы правы, не открывал. Сейчас открыл:
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
Иллюстратор ничего не проставил (x="0px" y="0px) Спасибо за наводку, теперь буду знать, что размеры нужно проставлять вручную.
Только имейте в виду, что атибуты x и y отвечают за расположение элемента (я правда не знаю для чего они нужны в корневом svg, там можно любые цифры поставить и вроде ничего не должно изменится), а для задания ширины и высоты используются атрибуты width и height (вручную допишите).

Всё понял, спасибо!

Sign In

Смена картинки svg при наведении курсора без задержки/альтернатива

Question

Torawhite

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

satantx

Link to comment

Share on other sites

Torawhite

Link to comment

Share on other sites

ows.nightwolf

Link to comment

Share on other sites

Torawhite

Link to comment

Share on other sites

ows.nightwolf

Link to comment

Share on other sites

Torawhite

Link to comment

Share on other sites

ows.nightwolf

Link to comment

Share on other sites

Torawhite

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information