3

Не вызывается иконка из спрайта Оригинальная svg иконка которая сгенерированная программой Avacode

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/></defs><g><g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="#qq8ea"/><use fill="#fff" fill-opacity="0" stroke="#a86ac7" stroke-miterlimit="50" xlink:href="#qq8ea"/></g></g></svg>

А здесь созданный мною спрайт, который пока содержит ту самую одну иконку

<svg xmlns="http://www.w3.org/2000/svg" >
            <defs>
                <symbol id="plus" viewBox="0 0 24 24">
                    <path d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
                </symbol>
            </defs>
        </svg>

И вот так я пробую вызывать иконку с этого спрайта

<svg>
            <g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="#plus"></use></g>
        </svg>

Но почему-то не вызывается иконка в чем проблема?

1 ответ 1

4

Теория

Если спрайт, в котором находится иконка является отдельным файлом, то необходимо сначала добавить этот файл в HTML

<object type="image/svg+xml" data="images/svgdefs.svg">
  Your  browser does not support SVG 
</object>  

И только потом вызывать иконку по ID из этого спрайта:

<svg>
            <g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="svgdefs.svg#plus"></use></g>
        </svg>  

Note

Экспериментальные технологии Chrome в этом вызове допускают не указывать имя файла, в котором хранится иконка, но для более полной поддержки всеми браузерами лучше указывать имя файла

Практика

Теги <symbol id="plus"> c ID используются по двум показаниям:

  • svg код внутри этих тегов скрывается до вызова командой <use> и в одном файле спрайте можно поместить несколько иконок с разными ID
  • Каждому тегу <symbol id="icon2" viewBox="0 0 24 24"> можно присвоить свой viewBox, который позволяет отдельно масштабировать каждую иконку.

Ниже код вашей иконки. Аккуратно убрал лишнее.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">

 <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>

 <g transform="translate(-452 -1183)">
  <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
  </g>
</svg>

Окружаем код <symbol id="plus">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"  viewBox="0 0 24 24">
<symbol  id="plus" >
 <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
 </defs>
 <g transform="translate(-452 -1183)">
  <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
  </g> 
 </symbol>  
</svg> 

Как и ожидалось всё скрывается до вызова с помощью <use>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"  viewBox="0 0 24 24">
 
<symbol  id="plus">
 <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
 
 <g transform="translate(-452 -1183)">
  <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
  </g> 
 </symbol>  
 
</svg> 

<svg>
 <use xlink:href="#plus" />
</svg>

Теперь можно вызывать эту иконку сколько угодно раз

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"  viewBox="0 0 24 24">
 <defs>
<symbol  id="plus">
 <path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
 
 <g transform="translate(-452 -1183)">
  <use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
  </g> 
 </symbol>  
 </defs>
</svg> 

<svg>
 <use xlink:href="#plus" />
<use xlink:href="#plus" transform="scale(2)" x="15" /> 
<use xlink:href="#plus" transform="scale(3)" x="30" />
 
</svg>

9
  • Я пока не отделял спрайт в отдельный файл, потому что он в одно html файле с вызовом не работает
    – LiEm
    21 янв 2019 в 11:25
  • @LiEm Если вы работаете на локалке в Chrome, то иконки на локалке в этом браузере из файла не вызываются - известный баг В любом случае лучше всегда указывать имя файла, чтобы не мучиться потом в поисках багов 21 янв 2019 в 11:29
  • Не в локалке дело, а в svg где-то ошибка зарыта я вызывал простые фигуры в виде круга и все отлично вызывается
    – LiEm
    21 янв 2019 в 11:32
  • @LiEm сейчас сделаю update в вашем примере с вашей иконкой 21 янв 2019 в 11:33
  • 1
    @LiEm Да не за что. Практический совет, когда будете рисовать свои иконки постарайтесь сделать так, чтобы не было внутри кода transform translate/ То есть нужно выбирать размер документа при рисовании чуть чуть больше размера иконки и строго рисовать внутри него, не перемещать иконку, не масштабировать при рисовании. А на этапе освоения svg лучше брать профессиональные иконки 21 янв 2019 в 14:13

Ваш ответ

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

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