Блог

Главная - Вопросы по программированию - Как декодировать SVG-файл base64 и использовать его в качестве шаблона Angular?

Как декодировать SVG-файл base64 и использовать его в качестве шаблона Angular?

#angular #typescript #svg #angular-components #angular-template

#angular #typescript #svg #angular-компоненты #angular-template

Вопрос:

Я хотел бы преобразовать SVG-изображение в кодировке base64 в шаблон Angular с расширением .svg, например my-template.component.svg .

Я получаю svg-файл в кодировке base64 через вызов API в следующей форме:

 data:image/svg xml;base64,PHN2ZyBpZD0iREVWSUNFX01BUF8tX09wZW5lZF9jb3B5IiBkYXRhLW5...

Это должен стать обычным SVG-файлом, который я хотел бы использовать в качестве шаблона. Итак, содержимое my-template.component.svg должно выглядеть так:

 <svg width = "100" height = "100">
   <circle cx = "50" cy = "50" r = "40" stroke = "green" stroke-width = "4" fill = "yellow" />
   ...
</svg>

В противном случае я не смогу манипулировать SVG-файлом в кодировке base64 с помощью CSS, поскольку селекторы недоступны в DOM.

В настоящее время возвращаемое значение из вызова API используется следующим образом:

 <img id ="img" [src]="api-url  '/path/to/svg/file.svg'" />

Таким образом, атрибут src тега img становится:

 <img id="img" src="data:image/svg xml;base64,PHN2ZyBpZD0iREVWSUNFX01BUF8tX09wZW5lZF9jb3B5IiBkYXRhLW5..." />