1

Код svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 26 26">
  <image id="location-pin" width="26" height="26" xlink:href="data:image/png;base64,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"/>
</svg>

введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

5
  • 3
    От того что вы завернули PNG-картинку в виде base64 в SVG она не стала внезапно векторной
    – Alexey Ten
    17 июн 2021 в 10:18
  • Все верно. Возможно ли преобразовать png картинку в векторную? (Картинку png я преобразовал в виде base64 через Adobe XD) 17 июн 2021 в 10:23
  • 2
    «Обвести» иконку в векторном редакторе. Эту иконку рисовать минут 10
    – Alexey Ten
    17 июн 2021 в 10:36
  • Большое спасибо! 17 июн 2021 в 10:44
  • 1
    Через illustrator можно оттрейсить или перерисовать.
    – Greg--
    17 июн 2021 в 11:38

1 ответ 1

3

В комментариях совершенно справедливо отметили, что растровое изображение с конвертированное в формат Base64 не стилизуется, как вектор. (fill="red")
В этом случае для закраски можно применить CSS или SVG фильтры.
Но можно нарисовать иконку или подобрать готовую. У меня есть подобная иконка маркера SVG.

Оборачиваем её код в теги <symbol> и присваиваем id ="marker"

далее эту иконку можно вызывать по id сколько угодно раз в любом месте HTML с помощью <use class="u1" href="#marker" />

При стилизации из внешнего CSS необходимо добавить принудительное наследование, чтобы решить проблему shadow DOM

use path{
fill:inherit;
stroke:inherit;
 }

Изменение цвета маркера при наведении:

 use path{
fill:inherit;
stroke:inherit;
 }
.u1,.u2,.u3 {
fill:#E5C983;
 }
.u1:hover {
fill:red;
 } 
.u2:hover {
fill:dodgerblue;
 } 
 
  .u3:hover {
fill:green;

 }
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 9.8 14.8" >
<symbol id="marker" >
    <path   d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
    <circle cx="4.912" cy="4.916" r="2.932"  fill="#E7EDEF"/>
</symbol>   
 
</svg> 
<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u1" href="#marker"  />
</svg>

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u2" href="#marker"  />
</svg>  

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u3" href="#marker"  />
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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