Svg icons doesn't visible in modal windows
In our AngularJS app we have an html file with svg ``` <svg width="0" height="0" style="position:absolute" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 32 32" id="cross"><path d="..." fill-rule="evenodd"/></symbol>
</svg> ```
We include this file in index.html ``` <ng-include src="'assets/svg/symbols.svg.html'"></ng-include> ```
And also we have special directive with dynamic href (where {{href}} is `#cross`), where use the svg ```
<svg>
<use xlink:href="{{ href }}"></use>
</svg>
```
And then we use the directive in another directives ``` <svg-icon icon="cross" ng-click="cancel()"></svg-icon> ```
And it works, but not in modal windows in FireFox. Svg is in DOM, but #shodow-root is empty
Would you help us to fix this problem?
In our AngularJS app we have an html file with svg
```
<svg width="0" height="0" style="position:absolute" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 32 32" id="cross"><path d="..." fill-rule="evenodd"/></symbol>
</svg>
```
We include this file in index.html
```
<ng-include src="'assets/svg/symbols.svg.html'"></ng-include>
```
And also we have special directive with dynamic href (where {{href}} is `#cross`), where use the svg
```
<span class="icon">
<svg>
<use xlink:href="{{ href }}"></use>
</svg>
</span>
```
And then we use the directive in another directives
```
<svg-icon icon="cross" ng-click="cancel()"></svg-icon>
```
And it works, but not in modal windows in FireFox. Svg is in DOM, but #shodow-root is empty
Would you help us to fix this problem?
Все ответы (1)
We added a condition to our svg directive, and it helped
<svg ng-if="true">
<use xlink:href="{{ href }}"></use>
</svg>