Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Əgər kömək lazımdırsa lütfən yeni sual verin.

Svg icons doesn't visible in modal windows

  • 1 cavab
  • 1 has this problem
  • 3 views
  • Last reply by preigile1

preigile1
preigile1
more options

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?

All Replies (1)

preigile1
preigile1 Question owner
more options

We added a condition to our svg directive, and it helped 

<svg ng-if="true">
  <use xlink:href="{{ href }}"></use>
</svg>