표시가 없으면 인라인 SVG가 Firefox에서 올바르게 렌더링되지 않습니다. 이유가 무엇입니까?

우리는 인라인 SVG를 상당히 많이 사용합니다. 최근에 나는 Firefox에서 특히 원하지 않는 동작을 발견했지만 다른 svg의 스타일링이 서로 방해 할 수있는 Chrome에서 비슷한 문제를 겪었습니다. 나는 현재의 문제를 'display : none'의 사용으로 추적했다.표시가 없으면 인라인 SVG가 Firefox에서 올바르게 렌더링되지 않습니다. 이유가 무엇입니까?

내 문제를 설명하려면 아래 첨부 된 HTML을 참조하십시오. 여기에는 두 개의 원형 독일어 플래그가 포함되어 있으며 첫 번째 플래그는 숨겨져 있습니다. 크롬에서는 둥근 독일어 플래그 (올바른)를 볼 수 있습니다. Firefox에서는 정사각형의 독일어 플래그 (잘못된 플래그)가 표시됩니다. 첫 번째 div에서 디스플레이 : 없음을 제거하면 두 플래그가 제대로 표시되고 (라운드) 첫 번째 div 전체를 제거하면 두 번째 플래그가 올바르게 표시됩니다 (반올림).

두 번째 어커런스가 잘못 표시되는 svg가 처음 나타날 때 디스플레이가 표시되지 않는 이유는 무엇입니까?

둘 다 svg에서 다른 ID를 사용하여이 문제를 해결할 수 있다고 생각했지만, 인라인 svg가 들어있는 일반적인 html 파일의 여러 페이지에이를 포함시키고 싶기 때문에이 순간은 매우 비현실적입니다.

<html> 
<body> 

<div style="display: none;"> 
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> 
    <defs> 
     <circle id="bundesliga-a" cx="-52" cy="-52" r="32"/> 
    </defs> 
    <clipPath id="bundesliga-b"> 
     <use xlink:href="#bundesliga-a" overflow="visible"/> 
    </clipPath> 
    <g clip-path="url(#bundesliga-b)"> 
     <path fill="#FFF" 
      d="M3.9 2.7S5.5.4 5-.5C4.5-1.6-8-14.2-8-14.2c.5-.9.7-1.8 1.1-2.7-1.4-1.6-1.6-3.6-.9-6.2.7-2.7 5.7-19.4-.7-31 .7-1.6 2.1-4.8 2.5-11.6 1.1-12.8-6.6-21-17.1-21-6.6 0-16.2-.5-20.1-2.3-8.5-4-10.6-14.3-6.9-17.2l.2-.2c1.1-.7 3-.2 5 .5 1.6.5 3.2.9 5 .7h.7c10.3-1.4 9.6-10.3 9.6-10.3 0 1.6-2.3 1.8-2.7 2.1-3.2.5-7.5-.7-9.8-.7-.9 0-2.7.5-3.2.7-5.7 2.1-12.5 7.3-10.5 16.2 2.1 9.3 8.4 11.8 15 12.8.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.6 17.1 2.5 13.9 18.2 12.3 23-3.6-1.1-11.7 5.3-15.3 5.5-2.7.1-6.7-8.9-7.4-10.6 9.1 3.2 17.3-.9 18.2-1.8 1.4-.9.2-1.1-1.8-1.1-8.2.2-10.5-5-16.9-8.7-2.2-1.2-5.6-2.5-9.2-3.2l-5.8-6.7c-2.9-2.5-6.6-3.8-10.2-3.4-4.6.5-12.8 6.2-18.3 12.3-5.5 6.4-8.2 10-9.3 14.6-.7 2.7-.5 7.3-.5 7.3-5.7 6.8-2.3 21-2.3 21s-5.2 8.7-3 21.9c.7 4.6-.9 9.8-1.6 12.3-.2.9-.5 1.1-.9 1.4-.5.5-2.5 2.1-3 3.2-.7 1.8.7 3 .7 3-6.2 4.3-6.9 8.6-6.9 8.6s.9.2 2.3.5h.5c10 1.4 14.1-1.1 14.1-1.1 1.8-4.6-.4-7-.4-7s1.8-.2 2.5-2.1c.5-1.4-.5-2.7-.5-2.7.5-1.8 3-10.9 11.4-15 0 0 3 3 5 3.4 2.7.7 6.8-.7 6.8-.7.7 2.1.9 4.6.9 4.6S-72.2-6.2-77.3-3c.2 1.6 4.1 10 11.8 10.7h.9c.7 0 1.4 0 2.1-.2 5.9-1.1 10-11.5 12.2-19.9 1.8-.5 2.7-.7 4.3-1.4 1.1.9 2.1 2.6 2.1 3.6-.1 1.3-1 3.1-2.1 4.2-1.4 1.6-2.7 2.3-3 3.4-.2 1.4.5 2.3.5 2.3s-1.4.7-3 2.5c-3 3.4-3.3 5.6-3.3 5.6.9.2 2.5.5 2.5.5 5 .5 10 .6 11.5-.6 0 0 .7-3-.5-5.5.9 0 1.1-.7 1.5-.9 1.8-1.1 1.4-3.4 1.4-3.4.9-1.6 3.9-7.1 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-2.9-1.1-3.9.2.1.6.1 1.2 0 .7.5 2.3 1.8 4.4 1.7 3.2-.1 4.2-2.4 4.2-2.4s1.8 2.7 4.8 4.8c3.6 2.5 4.3 3 5.7 4.6 2.1 2.3 3 3.4 4.1 5.7C-4.7.7-4.4 4.3-3.1 5c1.8.9 5.5.7 5.7.5 2.6-2.1 1.3-2.8 1.3-2.8z"/> 
     <path fill="#D42329" 
      d="M7.2-1.2L5.4-3c-.5-.5.5-2.3-.9-3.4C2.9-7.8 1.8-7.1.4-8.5c-4.3-4.1-4.3-4.1-5.5-7.1-.5-1.4-1.6-4.8-.9-7.5s4.1-19.4-2.3-31c.7-1.6 2.1-4.8 2.5-11.6.9-12.7-6.8-21.1-17.1-21.1-6.6 0-16.2-.5-19.8-2.3-8.6-4.1-10.7-14.1-7.3-16.9l.2-.2c2.3-1.4 6.2 1.4 10 .9h.7c10.3-1.4 9.6-10.3 9.6-10.3-.9 1.6-3.2 2.1-3.6 2.1-3.2.5-5-.7-9.8-.7-.9 0-1.8.2-2.7.5-.2 0-.2 0-.5.2-5.5 2.1-11.2 8.9-8.7 17.1s7.8 10.7 13.3 11.8c.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.4.5 0 .9.2 1.4.2 20.1 3.6 12.8 23.2 12.8 23.2-.5-.2-.9-.5-1.6-.7-3.7-.9-9.9-.7-13.2-.7-2.1 0-3.2-.5-5-1.6-1-.6-3-.8-3.9-1.6.9 2.1.7 3.1.2 5.6 0 0 2.7 4.1 2.7 7.2 0 2.1-5.7 5.5-5.7 5.5s-2.3 7.5-3 9.6c-.5 1.8.9 6.2.2 7.7-.7 1.6-4.1 3.6-6.8 4.3-3.2.7-4.1-1.1-4.6-1.6-.7-.2-4.6 0-5.9-.2-1.8-.2-3.2-.9-3.9-3-.7-2.3-1.4-3.9-2.3-4.1-2.5-.5-4.8-1.4-6.8-3-2.1-1.6-3.9-7.1-4.3-9.8-2.6 3.1-2 10-1.5 11.7 3.4 2.6 0 21.3 7.5 24.5 2.3 1.1 4.1.2 5.5-.5-.9-3-3.2-6.8-3.2-6.8s2.7 0 5 2.5c.7.9 2.7 7.5.5 15 0 0-.2-2.7-.5-3.9 0 0-3.2-1.8-8.4.7 0 .9 3.4 9.6 10 9.8.7 0 1.4 0 2.1-.2 5.9-1.1 9.8-10.7 11.8-19.1 1.7-.5 3.2-1 5-1.6 3.9-1.6 7.1-3.9 9.1-6.4-1.1 4.3-6.2 7.1-6.2 7.1.5.7.7 1.8.5 3-.2 1.4-1.8 3.6-2.7 4.8-.7.7-1.4 1.4-1.8 2.1-.7 1.1-.5 2.5.2 3 0 0-4.1 2.5-6.4 8.9 4.8.5 10.3-.2 11.8-1.4 0 0 .7-3-.5-5.5.9 0 1.4-.2 1.8-.5 1.8-1.4 1.1-3.9 1.1-3.9.9-1.6 3.6-7.3 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-3-1.1-3.9l-.2-.2c-2.5-2.7.9-5.9 1.4-9.3 1.1 1.6.2 3.6 0 5.2-.2 1.8-.5 4.1 1.6 5.2.7.5 1.8.7 3.2.5 3.2 0 3.9-2.1 3.9-2.1-5.7-5.9-6.4-10.6-5.5-13.2 1.5-4.5 5.1-9.3 5.1-9.3-1.1 3.6-3.7 7-2.8 11.8.9 5 4.3 9.3 7.7 13 2.5 2.5 6.4 4.6 7.7 6.6C-1.8-1.5-3.7-2.7-2.8.5c.5 1.8 1.1 2.1 3 2.3 1.1 0 .9.7 2.7-.2C4.3 1.9 5 .8 5 .8s3.1-1.3 2.2-2z"/> 
    </g> 
    <g> 
     <defs> 
      <circle id="bundesliga-c" cx="32" cy="32" r="32"/> 
     </defs> 
     <clipPath id="bundesliga-d"> 
      <use xlink:href="#bundesliga-c" overflow="visible"/> 
     </clipPath> 
     <circle clip-path="url(#bundesliga-d)" fill="#D12028" cx="32" cy="32" r="32"/> 
     <defs> 
      <circle id="bundesliga-e" cx="32" cy="32" r="32"/> 
     </defs> 
     <clipPath id="bundesliga-f"> 
      <use xlink:href="#bundesliga-e" overflow="visible"/> 
     </clipPath> 
     <path clip-path="url(#bundesliga-f)" fill="#EEC258" d="M0 43.2h64V64H0z"/> 
     <g> 
      <defs> 
       <circle id="bundesliga-g" cx="32" cy="32" r="32"/> 
      </defs> 
      <clipPath id="bundesliga-h"> 
       <use xlink:href="#bundesliga-g" overflow="visible"/> 
      </clipPath> 
      <path clip-path="url(#bundesliga-h)" fill="#292929" d="M0 0h64v20.8H0z"/> 
     </g> 
     <g> 
      <defs> 
       <circle id="bundesliga-i" cx="32" cy="32" r="32"/> 
      </defs> 
      <clipPath id="bundesliga-j"> 
       <use xlink:href="#bundesliga-i" overflow="visible"/> 
      </clipPath> 
      <path opacity=".07" clip-path="url(#bundesliga-j)" fill="#292929" d="M17.6 64H0V0h40"/> 
     </g> 
    </g> 
</svg> 
</div> 

<div> 
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> 
    <defs> 
     <circle id="bundesliga-a" cx="-52" cy="-52" r="32"/> 
    </defs> 
    <clipPath id="bundesliga-b"> 
     <use xlink:href="#bundesliga-a" overflow="visible"/> 
    </clipPath> 
    <g clip-path="url(#bundesliga-b)"> 
     <path fill="#FFF" 
      d="M3.9 2.7S5.5.4 5-.5C4.5-1.6-8-14.2-8-14.2c.5-.9.7-1.8 1.1-2.7-1.4-1.6-1.6-3.6-.9-6.2.7-2.7 5.7-19.4-.7-31 .7-1.6 2.1-4.8 2.5-11.6 1.1-12.8-6.6-21-17.1-21-6.6 0-16.2-.5-20.1-2.3-8.5-4-10.6-14.3-6.9-17.2l.2-.2c1.1-.7 3-.2 5 .5 1.6.5 3.2.9 5 .7h.7c10.3-1.4 9.6-10.3 9.6-10.3 0 1.6-2.3 1.8-2.7 2.1-3.2.5-7.5-.7-9.8-.7-.9 0-2.7.5-3.2.7-5.7 2.1-12.5 7.3-10.5 16.2 2.1 9.3 8.4 11.8 15 12.8.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.6 17.1 2.5 13.9 18.2 12.3 23-3.6-1.1-11.7 5.3-15.3 5.5-2.7.1-6.7-8.9-7.4-10.6 9.1 3.2 17.3-.9 18.2-1.8 1.4-.9.2-1.1-1.8-1.1-8.2.2-10.5-5-16.9-8.7-2.2-1.2-5.6-2.5-9.2-3.2l-5.8-6.7c-2.9-2.5-6.6-3.8-10.2-3.4-4.6.5-12.8 6.2-18.3 12.3-5.5 6.4-8.2 10-9.3 14.6-.7 2.7-.5 7.3-.5 7.3-5.7 6.8-2.3 21-2.3 21s-5.2 8.7-3 21.9c.7 4.6-.9 9.8-1.6 12.3-.2.9-.5 1.1-.9 1.4-.5.5-2.5 2.1-3 3.2-.7 1.8.7 3 .7 3-6.2 4.3-6.9 8.6-6.9 8.6s.9.2 2.3.5h.5c10 1.4 14.1-1.1 14.1-1.1 1.8-4.6-.4-7-.4-7s1.8-.2 2.5-2.1c.5-1.4-.5-2.7-.5-2.7.5-1.8 3-10.9 11.4-15 0 0 3 3 5 3.4 2.7.7 6.8-.7 6.8-.7.7 2.1.9 4.6.9 4.6S-72.2-6.2-77.3-3c.2 1.6 4.1 10 11.8 10.7h.9c.7 0 1.4 0 2.1-.2 5.9-1.1 10-11.5 12.2-19.9 1.8-.5 2.7-.7 4.3-1.4 1.1.9 2.1 2.6 2.1 3.6-.1 1.3-1 3.1-2.1 4.2-1.4 1.6-2.7 2.3-3 3.4-.2 1.4.5 2.3.5 2.3s-1.4.7-3 2.5c-3 3.4-3.3 5.6-3.3 5.6.9.2 2.5.5 2.5.5 5 .5 10 .6 11.5-.6 0 0 .7-3-.5-5.5.9 0 1.1-.7 1.5-.9 1.8-1.1 1.4-3.4 1.4-3.4.9-1.6 3.9-7.1 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-2.9-1.1-3.9.2.1.6.1 1.2 0 .7.5 2.3 1.8 4.4 1.7 3.2-.1 4.2-2.4 4.2-2.4s1.8 2.7 4.8 4.8c3.6 2.5 4.3 3 5.7 4.6 2.1 2.3 3 3.4 4.1 5.7C-4.7.7-4.4 4.3-3.1 5c1.8.9 5.5.7 5.7.5 2.6-2.1 1.3-2.8 1.3-2.8z"/> 
     <path fill="#D42329" 
      d="M7.2-1.2L5.4-3c-.5-.5.5-2.3-.9-3.4C2.9-7.8 1.8-7.1.4-8.5c-4.3-4.1-4.3-4.1-5.5-7.1-.5-1.4-1.6-4.8-.9-7.5s4.1-19.4-2.3-31c.7-1.6 2.1-4.8 2.5-11.6.9-12.7-6.8-21.1-17.1-21.1-6.6 0-16.2-.5-19.8-2.3-8.6-4.1-10.7-14.1-7.3-16.9l.2-.2c2.3-1.4 6.2 1.4 10 .9h.7c10.3-1.4 9.6-10.3 9.6-10.3-.9 1.6-3.2 2.1-3.6 2.1-3.2.5-5-.7-9.8-.7-.9 0-1.8.2-2.7.5-.2 0-.2 0-.5.2-5.5 2.1-11.2 8.9-8.7 17.1s7.8 10.7 13.3 11.8c.5 0 .9.2 1.1.2 3.9.7 8 .9 11.8 1.4.5 0 .9.2 1.4.2 20.1 3.6 12.8 23.2 12.8 23.2-.5-.2-.9-.5-1.6-.7-3.7-.9-9.9-.7-13.2-.7-2.1 0-3.2-.5-5-1.6-1-.6-3-.8-3.9-1.6.9 2.1.7 3.1.2 5.6 0 0 2.7 4.1 2.7 7.2 0 2.1-5.7 5.5-5.7 5.5s-2.3 7.5-3 9.6c-.5 1.8.9 6.2.2 7.7-.7 1.6-4.1 3.6-6.8 4.3-3.2.7-4.1-1.1-4.6-1.6-.7-.2-4.6 0-5.9-.2-1.8-.2-3.2-.9-3.9-3-.7-2.3-1.4-3.9-2.3-4.1-2.5-.5-4.8-1.4-6.8-3-2.1-1.6-3.9-7.1-4.3-9.8-2.6 3.1-2 10-1.5 11.7 3.4 2.6 0 21.3 7.5 24.5 2.3 1.1 4.1.2 5.5-.5-.9-3-3.2-6.8-3.2-6.8s2.7 0 5 2.5c.7.9 2.7 7.5.5 15 0 0-.2-2.7-.5-3.9 0 0-3.2-1.8-8.4.7 0 .9 3.4 9.6 10 9.8.7 0 1.4 0 2.1-.2 5.9-1.1 9.8-10.7 11.8-19.1 1.7-.5 3.2-1 5-1.6 3.9-1.6 7.1-3.9 9.1-6.4-1.1 4.3-6.2 7.1-6.2 7.1.5.7.7 1.8.5 3-.2 1.4-1.8 3.6-2.7 4.8-.7.7-1.4 1.4-1.8 2.1-.7 1.1-.5 2.5.2 3 0 0-4.1 2.5-6.4 8.9 4.8.5 10.3-.2 11.8-1.4 0 0 .7-3-.5-5.5.9 0 1.4-.2 1.8-.5 1.8-1.4 1.1-3.9 1.1-3.9.9-1.6 3.6-7.3 5.2-8.2 1.6-.9 2.7-1.6 3.4-3.6.5-1.6-.2-3-1.1-3.9l-.2-.2c-2.5-2.7.9-5.9 1.4-9.3 1.1 1.6.2 3.6 0 5.2-.2 1.8-.5 4.1 1.6 5.2.7.5 1.8.7 3.2.5 3.2 0 3.9-2.1 3.9-2.1-5.7-5.9-6.4-10.6-5.5-13.2 1.5-4.5 5.1-9.3 5.1-9.3-1.1 3.6-3.7 7-2.8 11.8.9 5 4.3 9.3 7.7 13 2.5 2.5 6.4 4.6 7.7 6.6C-1.8-1.5-3.7-2.7-2.8.5c.5 1.8 1.1 2.1 3 2.3 1.1 0 .9.7 2.7-.2C4.3 1.9 5 .8 5 .8s3.1-1.3 2.2-2z"/> 
    </g> 
    <g> 
     <defs> 
      <circle id="bundesliga-c" cx="32" cy="32" r="32"/> 
     </defs> 
     <clipPath id="bundesliga-d"> 
      <use xlink:href="#bundesliga-c" overflow="visible"/> 
     </clipPath> 
     <circle clip-path="url(#bundesliga-d)" fill="#D12028" cx="32" cy="32" r="32"/> 
     <defs> 
      <circle id="bundesliga-e" cx="32" cy="32" r="32"/> 
     </defs> 
     <clipPath id="bundesliga-f"> 
      <use xlink:href="#bundesliga-e" overflow="visible"/> 
     </clipPath> 
     <path clip-path="url(#bundesliga-f)" fill="#EEC258" d="M0 43.2h64V64H0z"/> 
     <g> 
      <defs> 
       <circle id="bundesliga-g" cx="32" cy="32" r="32"/> 
      </defs> 
      <clipPath id="bundesliga-h"> 
       <use xlink:href="#bundesliga-g" overflow="visible"/> 
      </clipPath> 
      <path clip-path="url(#bundesliga-h)" fill="#292929" d="M0 0h64v20.8H0z"/> 
     </g> 
     <g> 
      <defs> 
       <circle id="bundesliga-i" cx="32" cy="32" r="32"/> 
      </defs> 
      <clipPath id="bundesliga-j"> 
       <use xlink:href="#bundesliga-i" overflow="visible"/> 
      </clipPath> 
      <path opacity=".07" clip-path="url(#bundesliga-j)" fill="#292929" d="M17.6 64H0V0h40"/> 
     </g> 
    </g> 
</svg> 
</div> 

</body> 
</html>

출처

2016-12-14 Athaphian

좋아요,이 질문을 게시 한 이래로 저는 회사의 다른 소수의 사람들과 연락을하고 함께 작업했습니다.

첫 번째 문제 : 인라인 SVG 년대를 사용 및 특정 SVG는 두 번 포함되어 있으며이 특정 SVG는 SVG의 (적어도 파이어 폭스에서)의 첫 번째 (정의 clipPath에 예를 들어) ID 참조를 사용하고, display : none을 가진 html 요소 안에 있습니다. 그런 다음 svg의 두 번째 항목에서 id 참조는 첫 번째 (숨겨진) svg에서 clipPath를 참조하며 이로 인해 clipPath가 표시되지 않으므로 라운드 아이콘이 정사각형이됩니다.

내 임시 솔루션 : 이 문제의 원인이 된 많은 아이콘에는 동일한 clipPath가 여러 번 정의되어 있습니다. 나는이 정확한 clipPath을 정의하는 우리의 페이지 본체의 상단에 '더미'SVG 포함 :

<svg width="0" height="0" style="position: absolute;"><clipPath id="circle-32"><circle cx="32" cy="32" r="32"/></clipPath></svg>

가 그럼 난 우리의 모든 문제는 SVG의에서 모든 clipPath 정의를 제거를하고 # 원-32 clipPath에 대한 참조로 대체 .

이

작업 결과 SVG의 다시 :

장기적인 해결책 : 우리는 우리의 디자이너는이 많은 clipPath 참조를 사용하지 않는 적절한 SVG 년대를 생성/수출에 더 많은 시간을 할애 할 필요가 결정 (또는 그 문제에 대한 다른 참고 문헌), 앞으로는 웹용으로 적절히 내보내는 재 묘화 된 이미지로 전체 SVG 세트를 대체하고 이러한 구성을 최소화 할 것입니다.

나는 우리의 디자이너에 적절한 SVG 년대를 만드는 방법에 대한 팁이 블로그 게시물을 전달하도록 권장했다

: https://sarasoueidan.com/blog/svg-tips-for-designers/

출처

2016-12-15 12:48:09 Athaphian

표시가 없으면 인라인 SVG가 Firefox에서 올바르게 렌더링되지 않습니다. 이유가 무엇입니까?

답변

관련 문제