몹시 신경을 쓰는 인라인 SVG는 <use/>와 <symbol/>는/표시

내가 최근 @codepen 및 <symbol/> 및 <use/>를 사용하여 더 많은 휴대용 SVG에 내 손을 시도하는 팁을 뽑아 렌더링하는 데 실패합니다. 주로 렌더링하지 않지만 일부 영역에서는 렌더링합니다. 고려 :몹시 신경을 쓰는 인라인 SVG는 <use/>와 <symbol/>는/표시

<div class="row"><!-- MaterializeCSS --> 
    <div class="col s12 m6"> 
     <div id="componentDiv"> 
      <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> 
       <symbol id="svg-icon-facebook" title="Facebook" viewBox="0 0 512 512"> 
        <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path> 
       </symbol> 
       ... 
      </svg> 

      <div class="my-svg-icons"> 
       <a href="login?provider=facebook" aria-label="Log in with facebook"> 
        <span class="icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-facebook"></use></svg></span> 
       </a> 
       ... 
      </div> 
     </div> 
    </div> 
</div>

행은 DOM (fwiw)에서 약 5 레벨 깊이입니다.

FF와 크롬 렌더링을 거부 - 나는 등

오페라 행복 렌더링, 광고 차단제를 사용할 수 있습니다 확인했습니다.

"componentDiv"를 베어 볼 htmlboiler 페이지로 가져올 수 있으며 은으로 렌더링됩니다.

또한 심볼 블록을 몸체> 효과가없는 자식으로 배치하려고했습니다.

의견이 있으십니까?

출처

2016-08-20 CNSKnight

확인 - 직감에 의한 조사 이것은 FF/크롬 상대 URL/ 관련 버그를 알려줍니다. 계속 지켜봐. – CNSKnight

에 의해 "버그"나는 당신이해야한다고 생각한다고 가정합니다 .-) –

id = "svg_icon_facebook"으로 id = "svg-icon-facebook"변경을 고려하십시오 –

해결 방법 :

이 FF를 보이는데, 크롬 문제가 몇 시간 동안 many 영향을 미쳤다.

제 해결 방법은 인라인 <svg/> 블록이 아닌 <img/> 태그에서 .svg을 소싱하는 것입니다. 거기에서 xling : href 값이 변경되었습니다.

에서 :

<svg> 
<symbol id="symbol-id">...</symbol> 
... 
</svg> 
<svg> 
    <use xlink:href="#symbol-id></use> 
</svg>

사람 :

<img src="path/to/svg-markup.svg"/> 
<svg> 
    <use xlink:href="path/to/svg-markup#symbol-id></use> 
</svg>

출처

2016-08-21 12:14:22 CNSKnight

몹시 신경을 쓰는 인라인 SVG는 <use/>와 <symbol/>는/표시

답변

관련 문제