Angular вставка компонента в svg-tag - PullRequest
0 голосов
/ 18 апреля 2020

Я хотел бы узнать, могу ли я разместить 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

enter image description here

1 Ответ

0 голосов
/ 23 апреля 2020

Наконец я решил наложение двух элементов div, используя css класс сетки:

.container_row {
    display: grid;
}
.navigation-layer {
    grid-column: 1;
    grid-row: 1;
}
.content-layer {
    grid-column: 1;
    grid-row: 1;
    z-index: -1;
}

, и я переключаю div с помощью javascript и отображение: нет / блокировка включается и выключается. Этот результат очень хорошо перекрывает div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...