PNG смена изображения цвет

Question

У меня серьезные проблемы с покраской PNG-изображения. Все нити, которые я вижу, меняют цвет фона.

Мне нужно изменить цвет настраиваемого элемента, который я хочу продать (например, очки: изменение цвета стекла или храмов или спереди), когда клиент нажимает кнопку на цветной панели рядом с ней.

Я начал раскалывать исходное изображение в 4 частях .png (в примере: стекло, передняя часть, левый храм и правый храм), и я бы разместил их над другими. Как я могу изменить цвет правильного храма, например?

Я хочу, чтобы решение совместимо с IE.

Спасибо команде.

Answer 1

Лично и по возможности (в зависимости от ваших версий IE вам необходимо поддерживать этот метод> 8), я бы достиг этого с помощью встроенного SVG, а не png. Вероятно, SVG должен иметь меньшие размеры файлов, чем ваши pngs, сохраняющие вашу пропускную способность!

Любое сложное или основанное на растровом графике должно оставаться как jpg/png, в вашем случае это может быть фоновое изображение владельца очков. Сами очки были бы SVG.

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

<div id="myImgCnt"> 
    <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> 
     <rect class="square" x="14.8" y="17.7" width="165.1" height="165.1"/> 
     <circle class="circle" cx="105.8" cy="102" r="67.7"/> 
    </svg> 
</div> 

Обратите внимание, что я добавил класс к кругу и квадратным формам. Теперь это может быть нацелено, как обычно, в CSS, например.

.square{fill: red;} 
.circle{fill: blue;} 

Проверить эту скрипку для примера в действии https://jsfiddle.net/elmarko/t7z7sbag/