We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信，及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

话题已存档。 如果需要帮助请提出新问题。

Svg icons doesn't visible in modal windows

  • 1 个回答
  • 1 人有此问题
  • 3 次查看
  • 最后回复者为 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?

所有回复 (1)

preigile1
preigile1 提问者
more options

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

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