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 минут
Все, разобрался теперь =) проблема, в подключаемой библе =))) большое всем спасибо друзья!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@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, срабатывание по клику

Решение