This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Wo archive tread sia. Meɖekuku bia biabia yeye ne ehia kpeɖeŋu.

Svg icons doesn't visible in modal windows

  • 1 ŋuɖoɖo
  • 1 masɔmasɔ sia le esi
  • 3 views
  • Nuɖoɖo mlɔetɔ 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 Biabia la
more options

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

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