1

Подскажите есть ли какой-то способ изменить цвет у SVG-иконки с патерном вставленной инлайново?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="0 0 25 25" fill="none">
<rect width="25" height="25" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="    " width="1" height="1">
<use xlink:href="#image0_0_85" transform="scale(0.0078125)"/>
</pattern>
<image id="image0_0_85" width="128" height="128" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

Пробовал добавлять стили прям в HTML, ничего не работает

Куда копать дальше понятия не имею(

Предполагаю, что проблема в том, что иконка встроена как base64

1

1 ответ 1

1

Даже когда изображение в формате base64 добавлено инлайн, его можно покрасить только фильтрами.

Ниже пример с работой SVG фильтров

.R1:hover {
filter:url(#RedFilter);
} 

.G1:hover {
filter:url(#GreenFilter);
}
.B1:hover {
filter:url(#BlueFilter);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" style="border:1px solid grey;"> 

  <defs>
 <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter> 
    <filter id="GreenFilter" x="-20" y="-20" width="140" height="140">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter> 
    
    <filter id="BlueFilter" x="-20" y="-20" width="140" height="140">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter> 
    
    <filter id="WhiteFilter" x="-20" y="-20" width="140" height="140">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter>
 


   <image id="image0_0_85" width="100" height="100" xlink:href="data:image/png;base64,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"/>
 </defs>
    
   <use class="R1"  xlink:href="#image0_0_85" x="20" y="0"   ></use> 
   <use class="G1"  xlink:href="#image0_0_85" x="150" y="0"  ></use> 
    <use class="B1"  xlink:href="#image0_0_85" x="280" y="0"  ></use>
    
</svg>

Пример покраски CSS фильтрами

.R1:hover {
filter: invert(65%) sepia(54%) saturate(2331%) hue-rotate(359deg) 
brightness(102%) contrast(106%);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" style="border:1px solid grey;"> 

  <defs>
    <image id="image0_0_85" width="100" height="100" xlink:href="data:image/png;base64,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"/>
 </defs>
    
   <use class="R1"  xlink:href="#image0_0_85"></use> 
  </svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.