Как мне оформить внешний файл SVG, включенный в мой HTML, без имени символа?

Question

У меня есть файл SVG, который выглядит следующим образом (значение для атрибута d для краткости опущено):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="..."/></svg>

Я хотел бы встроить этот файл в HTML (без включения источника SVGв соответствии).Я знаю, что есть несколько способов сделать это, вы можете использовать <img src="file.svg">, <object data="file.svg"> и так далее.Я хочу иметь возможность стилизовать этот файл SVG с помощью CSS (в моем случае, чтобы цвета соответствовали цвету текста в HTML).Я также не хочу использовать имена символов, поскольку ни один из файлов SVG, имеющихся в моем распоряжении, не использует символы.

До сих пор я не нашел решения, отвечающего всем этим трем требованиям.Чтобы повторить:

1. HTML-код должен ссылаться на внешний файл SVG
2. Должна быть возможность стилизовать изображение SVG с использованием внешнего CSS
3. .не требовать, чтобы в файле SVG было имя символа.

Если это невозможно, дайте мне знать, я приму это как ответ.

Answer 1

Это должно быть возможно, если SVG не имеет цвет заливки, определенный в его коде.Я могу ошибаться.Вы пробовали что-то подобное?

HTML

<svg class="icon-1">
   <use xlink:href="#icon-1"></use>
</svg>

CSS

.svg {
  fill: red;
}

ИСТОЧНИК: https://css -tricks.com / svg-use-with-external-reference-take-2 /