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

Mulongo oyo etiyamaki na archive. Tuna motuna mosusu soki osengeli na lisalisi

Svg icons doesn't visible in modal windows

  • 1 eyano
  • 1 eza na nkokoso oyo
  • 3 views
  • Eyano yasuka ya 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 Nkolo motuna
more options

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

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