Приведенный ниже svg (созданный с помощью какой-либо онлайн-службы) сохраняется в файле (с именем arrows.svg), на который я пытаюсь сослаться из файла html, используя тег <use>:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640"
width="128" height="128">
<defs>
<path id="b7a1Gm7TF" d="M7.41 190C7.41 173.43 20.53 160 36.72 160C66.02 160 212.55 160 476.29 160C476.29 124 476.29 104 476.29 100C476.29 73.29 507.92 59.95 526.32 78.79C536.09 88.79 614.24 168.79 624 178.79C635.45 190.51 635.45 209.5 624 221.22C614.24 231.22 536.09 311.22 526.32 321.22C507.99 339.98 476.29 326.82 476.29 300C476.29 296 476.29 276 476.29 240C212.55 240 66.02 240 36.72 240C20.53 240 7.41 226.57 7.41 210C7.41 206 7.41 192 7.41 190ZM163.71 400C163.71 364 163.71 344 163.71 340C163.71 313.36 132.13 299.9 113.68 318.79C103.91 328.79 25.76 408.79 16 418.79C4.55 430.51 4.55 449.5 16 461.22C25.76 471.22 103.91 551.22 113.68 561.22C132.03 580 163.71 566.8 163.71 540C163.71 536 163.71 516 163.71 480C427.45 480 573.98 480 603.28 480C619.47 480 632.59 466.57 632.59 450C632.59 448 632.59 432 632.59 430C632.59 413.43 619.47 400 603.28 400C544.67 400 398.15 400 163.71 400Z"></path>
</defs>
<g>
<g>
<g>
<use xlink:href="#b7a1Gm7TF" opacity="1" fill="#168d2b" fill-opacity="1"></use>
</g>
</g>
</g>
</svg>
Я знаю, что для обращения к внешнему svg-файлу требуется указать указанный id, но независимо от того, где я добавляю атрибут id, ссылка на него не работает ( использование встроенных функций действительно работает, как показано выше).
Вот index.html (обратите внимание, что я использую href вместо xlink:href):
<svg>
<use href="arrows.svg#arrows"></use>
</svg>
arrows.svg - 1-е испытание:
...
<svg id="arrows" ...></svg>
...
arrows.svg - 2-е испытание:
...
<g>
<use id="arrows" xlink:href="#b7a1Gm7TF" ...></use>
</g>
...
РЕДАКТИРОВАТЬ:
Однако, когда я упрощаю svg следующим образом, добавив id к тегу <svg>, ссылка на файл svg работает должным образом:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="arrows" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640"
width="128" height="128" opacity="1" fill="#168d2b" fill-opacity="1">
<path id="b7a1Gm7TF" d="M7.41 190C7.41 173.43 20.53 160 36.72 160C66.02 160 212.55 160 476.29 160C476.29 124 476.29 104 476.29 100C476.29 73.29 507.92 59.95 526.32 78.79C536.09 88.79 614.24 168.79 624 178.79C635.45 190.51 635.45 209.5 624 221.22C614.24 231.22 536.09 311.22 526.32 321.22C507.99 339.98 476.29 326.82 476.29 300C476.29 296 476.29 276 476.29 240C212.55 240 66.02 240 36.72 240C20.53 240 7.41 226.57 7.41 210C7.41 206 7.41 192 7.41 190ZM163.71 400C163.71 364 163.71 344 163.71 340C163.71 313.36 132.13 299.9 113.68 318.79C103.91 328.79 25.76 408.79 16 418.79C4.55 430.51 4.55 449.5 16 461.22C25.76 471.22 103.91 551.22 113.68 561.22C132.03 580 163.71 566.8 163.71 540C163.71 536 163.71 516 163.71 480C427.45 480 573.98 480 603.28 480C619.47 480 632.59 466.57 632.59 450C632.59 448 632.59 432 632.59 430C632.59 413.43 619.47 400 603.28 400C544.67 400 398.15 400 163.71 400Z"></path>
</svg>
Что я делаю не так с первой версией svg с более сложной структурой?
Обратите внимание, что на самом деле файл svg может быть намного сложнее, и я не уверен, что смогу упростить его, как я сделал здесь.