Avatar for Username

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

이 쓰레드는 보존되었습니다. 만약 도움이 필요하시면 새로운 질문을 올려주세요.

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>