ColorPick, срабатывание по клику

@borockov · Регистрация: 05.11.2012

Студворк — интернет-сервис помощи студентам

Доброго времени суток друзья! У меня была обычная jpg картинка, я ее перевел в svg, нужные мне элементы объединил под общими классами, получилось три класса #babochka #cvet #tk теперь например, если я меняю цвет картинки в классе #babochka то новый цвет применяется ко всем элементам с этим классом, с этим понятно, но цвет я меняю сейчас через инспектор кода в хроме, а хотелось бы, что бы все это дело имело какой то интерфейс, поэтому поискав немного в сети, наткнулся наjquery colorpick, только вот проблема, с jquery я никогда не сталкивался, и не могу вникнуть, в то, как его прикрутить, что бы например при клике на элемент с классом #babochka появлялась цветовая палитра.
p.s моя небольшая наработка http://baxtex.ru/test/index.html
p.p.s так же прикрепил архив

@borockov · 25.01.2018, 10:38 **[ТС]**

Здравствуйте друзья! Передо мной стоит небольшая задача, суть:
Есть картинка(в прикрепленном файле, с цветами и бабочками), задача заключается в том, что бы например при клике на бабочку, всплывала форма выбора цвета(colorpicker), и после выбора нужного нам цвета, что бы этот цвет применялся ко всем бабочкам на этой картинке, та же ситуация и с остальными элементами, цветами, точками, и соответственно фоном.
Задачу частично я решил, в первую очередь, я перевел эту картинку в svg, затем, всем бабочкам раздал класс .babochka, цветочкам раздал класс .cvet точкам класс .tk вроде все хорошо, теперь когда страница открывается, можно кликнуть правой кнопкой мыши, выбрать "просмотр кода элемента", и в инспекторе кода найти например класс .babochka, и там же в палитре цветов задать ему нужный цвет, и вуаля, этот цвет применяется ко всем бобочкам, с другими элементами тоже самое, но, теперь я обращаюсь к вам за помощью, как мне реализовать форму, которая будет всплывать при клике на тот или иной класс, как сделать так, что бы выбранный цвет в colorpicker присваивался всем элементами с соответствующим классом?
Буду очень сильно благодарен вам за помощь.
P.s это мой первый опыт работы с svg, поэтому не до конца понимаю все ньюансы работы с ним

@Egor.S · 25.01.2018, 10:58

Как создать свой Color Picker на Javascript?

@msheal · 25.01.2018, 12:42

зачем изобретать велосипед, если полно подходящих готовых решений типа http://jscolor.com/?

Посмотрите в примерах, вам скорее всего подойдет метод onFineChange

@borockov · 25.01.2018, 16:21 **[ТС]**

Есть одна небольшая проблема, я уже пытался реализовать это при помощи jquery colorpicker, но возникает следующая проблема. Внутри svg файла, css привязывается без проблем, но при попытке привязать библиотеку js внутри svg сразу вылетает ошибка, js привязываю так:

HTML5
1
2
3
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <script xlink:href="external.js" />
</svg>

так же пробовал код привязываемой библы вставлять сразу внутрь svg, стандартный прием <script type= text/javascript>...<script> не срабатывает, почитав немного документации, попробовал следующим образом:
<script>//<![CDATA[
...код...
>]]
</script>
тоже не сработало, отсюда вопрос, как правильно вставлять, и привязывать js код к svg ???

@msheal · 25.01.2018, 17:27

borockov, не нужно подключать js файл внутри свг, подключите его как обычно, перед закрытием body

@borockov · 25.01.2018, 23:10 **[ТС]**

Проблема в том, что в свг отсутствуют теги body,head,html, svg состоит из стандарта xml

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="2489.000000pt" height="3533.000000pt" viewBox="0 0 2489.000000 3533.000000"
 preserveAspectRatio="xMidYMid meet">
 
<g transform="translate(0.000000,3533.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path id="tk" d="M8208 35308 c-7 -13 -13 -56 -13 -98 0 -83 15 -121 69 -178 53 -57
101 -77 186 -77 83 0 121 15 178 69 57 53 77 101 77 186 0 127 14 120 -255
120 -227 0 -229 0 -242 -22z"/>
<path id="tk" d="M10678 35308 c-7 -13 -13 -56 -13 -98 0 -83 15 -121 69 -178 53 -57
101 -77 186 -77 83 0 121 15 178 69 57 53 77 101 77 186 0 127 14 120 -255
120 -227 0 -229 0 -242 -22z"/>
<path id="cvet" d="M17615 35288 c156 -177 388 -390 530 -485 159 -107 394 -210 526
-232 96 -16 261 -14 332 5 178 46 393 209 505 381 37 59 121 266 137 341 l7
32 -1037 0 -1037 0 37 -42z"/>
<path id="cvet" d="M19956 35298 c113 -224 246 -413 355 -509 242 -210 426 -246 741
-143 166 55 290 139 486 329 87 85 193 200 236 255 l77 100 -956 0 -956 0 17
-32z"/>
..................
<path d="M1098 14683 c83 -2 221 -2 305 0 83 1 15 3 -153 3 -168 0 -236 -2
-152 -3z"/>
</g>
</svg>

это весь код, и при любой попытке вставить js, либо выплевывает ошибку, либо просто не срабатывает, а css как видно, подключился без проблем, и спокойно работает

Добавлено через 4 часа 18 минут
Ура друзья! Сработало, наконец то! msheal, в общем благодаря твоему совету все получилось, единственный момент, который остался мне не понятен:
В исходной версии мой svg вместо классов имел id, то есть все бабочки например имели id="babochka", в jscolor я прописал соответственно

JavaScript
1
2
3
4
5
6
<script>
function update(jscolor) {
    // 'jscolor' instance can be used as a string
    document.getElementById('babochka').style.fill = '#' + jscolor
}
</script>

и все заработало, только при выборе цвета в колорпикере, закрашивается только один элемент, я подумал что это из за того, что мои элементы имеют id а не классы, поэтому id я заменил на классы, а в скрипте дописал:

JavaScript
1
2
3
4
5
6
<script>
function update(jscolor) {
    // 'jscolor' instance can be used as a string
    document.getElementByClassName('babochka').style.fill = '#' + jscolor
}
</script>

после этого все перестало работать, то есть, когда элемент имеет id, то закрашивается но только самый первый, когда элемент имеет класс, то вообще ничего не происходит, может я класс не правильно ищу ?

Добавлено через 15 минут
Все, разобрался теперь =) проблема, в подключаемой библе =))) большое всем спасибо друзья!

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@borockov 4 / 4 / 3 Регистрация: 05.11.2012 Сообщений: 245
	25.01.2018, 10:38 [ТС]
	Здравствуйте друзья! Передо мной стоит небольшая задача, суть: Есть картинка(в прикрепленном файле, с цветами и бабочками), задача заключается в том, что бы например при клике на бабочку, всплывала форма выбора цвета(colorpicker), и после выбора нужного нам цвета, что бы этот цвет применялся ко всем бабочкам на этой картинке, та же ситуация и с остальными элементами, цветами, точками, и соответственно фоном. Задачу частично я решил, в первую очередь, я перевел эту картинку в svg, затем, всем бабочкам раздал класс .babochka, цветочкам раздал класс .cvet точкам класс .tk вроде все хорошо, теперь когда страница открывается, можно кликнуть правой кнопкой мыши, выбрать "просмотр кода элемента", и в инспекторе кода найти например класс .babochka, и там же в палитре цветов задать ему нужный цвет, и вуаля, этот цвет применяется ко всем бобочкам, с другими элементами тоже самое, но, теперь я обращаюсь к вам за помощью, как мне реализовать форму, которая будет всплывать при клике на тот или иной класс, как сделать так, что бы выбранный цвет в colorpicker присваивался всем элементами с соответствующим классом? Буду очень сильно благодарен вам за помощь. P.s это мой первый опыт работы с svg, поэтому не до конца понимаю все ньюансы работы с ним Миниатюры 0

@Egor.S 215 / 180 / 79 Регистрация: 02.10.2011 Сообщений: 651
	25.01.2018, 10:58
	Как создать свой Color Picker на Javascript? 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	25.01.2018, 12:42
	Сообщение было отмечено borockov как решение Решение зачем изобретать велосипед, если полно подходящих готовых решений типа http://jscolor.com/? Посмотрите в примерах, вам скорее всего подойдет метод onFineChange 2

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	25.01.2018, 17:27
	borockov, не нужно подключать js файл внутри свг, подключите его как обычно, перед закрытием body 0

ColorPick, срабатывание по клику

Решение