3

Добрый день уважаемые. Подскажите пожалуйста как перенести написание SVG фаила из html в background css ?

.heart{
                 position: absolute;
                 top: 0;
                 bottom: 0;
                 left: 0;
                 right: 0;
                 height: $heartSide;
                 width: $heartSide;
                 display: block;
                 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" enable-background:"new 0 0 200 200" xml:space="preserve"><path fill:#A41E21; d="M186.1,27.9c-3-2.8-17.6-14.9-44.9-10.4c-22.8,5.9-40.4,25.3-40.4,25.3s-0.8,0.7-0.8,0.7c0,0-0.8-0.7-0.8-0.7
                    S81.6,23.4,58.8,17.5C31.5,13,16.9,25.1,13.9,27.9c-39.3,36,14.7,138.9,82.9,155.1c0,0.1,3.2,0.5,3.2,0.5c0.1,0,3.2-0.4,3.2-0.5
                  C171.4,166.7,225.4,63.9,186.1,27.9z"/></svg>') 0 0 no-repeat;
                  z-index: 1; 
 }
<div class="heart">

<!-- 

<svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#A41E21;}
</style>
<path class="st0" d="M186.1,27.9c-3-2.8-17.6-14.9-44.9-10.4c-22.8,5.9-40.4,25.3-40.4,25.3s-0.8,0.7-0.8,0.7c0,0-0.8-0.7-0.8-0.7
  S81.6,23.4,58.8,17.5C31.5,13,16.9,25.1,13.9,27.9c-39.3,36,14.7,138.9,82.9,155.1c0,0.1,3.2,0.5,3.2,0.5c0.1,0,3.2-0.4,3.2-0.5
  C171.4,166.7,225.4,63.9,186.1,27.9z"/>
</svg>

-->
 
</div>

Не могу понять где я допускаю ошибку. Если разкомитить в html всё отображается как надо, а вот в css нет

0

2 ответа 2

4
  1. Убрать переносы внутри свг.
  2. fill перенести внутрь атрибута style.
  3. enable-background убрать вовсе.

.heart {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" xml:space="preserve"><path style="fill:#A41E21" d="M186.1,27.9c-3-2.8-17.6-14.9-44.9-10.4c-22.8,5.9-40.4,25.3-40.4,25.3s-0.8,0.7-0.8,0.7c0,0-0.8-0.7-0.8-0.7 S81.6,23.4,58.8,17.5C31.5,13,16.9,25.1,13.9,27.9c-39.3,36,14.7,138.9,82.9,155.1c0,0.1,3.2,0.5,3.2,0.5c0.1,0,3.2-0.4,3.2-0.5 C171.4,166.7,225.4,63.9,186.1,27.9z"/></svg>');
  z-index: 1;
}
<div class="heart"></div>

1

не советую делать так. лучше сохраните вашу картинку в отдельный .svg файл, а далее разместите его как обычный img. Вы также сможете менять и свойство .svg файла с помощью CSS, если он будет в отдельном файле.

Если же вы все же хотите добавить его в CSS файл, то вот вам способ: Переведите ваш файл в base64 и вставляйте полученный код вот в так:

.КАРТИНКА {
  background: url("data:image/svg+xml;base64,[полученный_конвертированный_код]");
}
8
  • 1
    Почему "не советуете так содержать"? И Всё таки как его свернуть в background ? 12 янв 2017 в 21:44
  • @BlackStar1991 как его развернуть в background стоит в моем сообщении. А не советую, потому-что это довольно жирный кусок кода, который будет мешать в будущем. Лучше всегда все ложить по разным файлам, если это возможно.
    – Insider
    12 янв 2017 в 21:47
  • Я имел ввиду как всё таки этот SVG код держать в background ? Я знаю что это реально jsfiddle.net/BlackStar1991/03a2zaqh/1 В такой записе он тоже читаем + его можно заанимировать. Не могу понять что не так с моим кодом 12 янв 2017 в 21:55
  • @BlackStar1991 кроме выше-предоставленного метода - никак. Вы ведь понимаете, что вы пытаетесь вставить в CSS как у вас, код HTML. Как он у вас заработает?
    – Insider
    12 янв 2017 в 21:56
  • jsfiddle.net/mkLasfsq/5 Как не странно заработал. Добрые люди подсказали смотреть на кодировку отступов 12 янв 2017 в 22:04

Ваш ответ

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

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