Я хотел бы узнать, могу ли я разместить angular -компонент внутри тега svg. Цель этой задачи - создать вложенный svg, который в противном случае оказался бы в очень большом встроенном html -файле. Поэтому я хотел бы найти способ решить эту проблему и разделить большой файл SVG на несколько компонентов, так как эти SVG-файлы накладываются друг на друга, мне просто нужно добавить функцию, чтобы отображалась только одна. Я не могу компонент после друг друга, поскольку svg-изображения являются вложенными.
В данный момент я могу создать компонент каждого SVG, но так как я не могу использовать внутри SVG, изображение создается компонентом путем компонент, а не вложенный, как я хочу. Я приложил изображение, которое, я надеюсь, показывает проблему, которую я хотел бы решить.
<div class="container-fluid w-75">
<app-component></app-component>
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
<!--Frame-->
<g id="Frame">
<path d="M1346,165V675a20,20,0,0,1-20,20H0v53a20,20,0,0,0,20,20H1346a20,20,0,0,0,20-20V165Z" fill="#d3d3d3" />
<path d="M1266,27h0a6,6,0,0,0,6,6h57a5,5,0,0,1,5,5V95a6,6,0,0,0,6,6h0a6,6,0,0,0,6-6V33a12,12,0,0,0-12-12h-62A6,6,0,0,0,1266,27Z" fill="#00970e" />
<path d="M100,742h0a6,6,0,0,0-6-6H37a5,5,0,0,1-5-5V674a6,6,0,0,0-6-6h0a6,6,0,0,0-6,6v62a12,12,0,0,0,12,12H94A6,6,0,0,0,100,742Z" fill="#00970e" />
<path d="M20,736V593a10,10,0,0,0-10-10h0A10,10,0,0,0,0,593V748H0a20,20,0,0,0,20,20H175a10,10,0,0,0,10-10h0a10,10,0,0,0-10-10H32A12,12,0,0,1,20,736Z" fill="#003750" />
<path d="M1346,33V176a10,10,0,0,0,10,10h0a10,10,0,0,0,10-10V21h0a20,20,0,0,0-20-20H1191a10,10,0,0,0-10,10h0a10,10,0,0,0,10,10h143A12,12,0,0,1,1346,33Z" fill="#003750" />
</g>
<app-component></app-component>
</svg>
</div>
Проверка <foreignObject>
-> не работает:
<foreignObject><app-component></app-component></foreignObject>
Главное изображение Встроенное изображение SVG