Inline SVG не отображается правильно в Firefox после отображения нет, почему?

Мы используем встроенный SVG довольно сильно в нашем приложении. Недавно я обнаружил нежелательное поведение (особенно в Firefox, но я видел подобные проблемы в Chrome), где стиль из разных svg может мешать друг другу. Я отслеживал свою текущую проблему до использования «display: none».Inline SVG не отображается правильно в Firefox после отображения нет, почему?

Чтобы проиллюстрировать мою проблему, см. Прилагаемый HTML-код ниже. Это содержит два круглых германских флага, первый из которых скрыт. В хроме вы увидите круглый немецкий флаг (что верно). В Firefox вы увидите квадратный немецкий флаг (что неверно). Если вы удалите дисплей: ни один из первого div, оба флага отображаются правильно (округлены) или если вы удалите весь первый div, второй флаг будет отображаться правильно (круглый).

Почему в первом вхождении svg не отображается отображение, отображающее неправильное отображение второго вхождения?

Я понял, что могу решить эту проблему, используя разные идентификаторы в обоих svg, но так как я хочу включить их на несколько страниц из общего html-файла, который содержит встроенный svg, в настоящий момент это практически нецелесообразно.

<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 использует ссылку идентификаторов (например, к определенному clipPath) И первый из SVG (по крайней мере, на светлячок) находится внутри элемента html с отображением: none .. THEN ссылка id во втором вхождении этого svg ссылается на clipPath в первом (скрытом) svg, и это приводит к тому, что clipPath не отображается, и поэтому круглый значок становится квадратным.

Теперь мое временное решение: Многие из наших значков, которые вызывали эту проблему, имели тот же самый клипп, определенный несколько раз. Я включил фиктивный SVG в верхней части нашей страницы тела, задающем это точное clipPath:

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

Затем я удалил все определения clipPath от всех нашей проблемной SVG и заменил их со ссылками на # круг-32 clipPath ,

В результате в работе SVG снова :)

Долгосрочное решение: Мы решили, что наш дизайнер должен тратить больше времени на создание/экспорт собственных SVG-х, которые не используют это много ссылок clipPath (или другие ссылки в этом отношении), и в будущем мы заменим весь наш набор svg перерисованными изображениями, которые правильно экспортируются для использования в Интернете и минимизируют эти конструкции.

я рекомендовал направить эту BlogPost с советами о том, как создать надлежащие SVG к нашему дизайнеру: https://sarasoueidan.com/blog/svg-tips-for-designers/

источник

2016-12-15 12:48:09 Athaphian

Inline SVG не отображается правильно в Firefox после отображения нет, почему?

ответ

Смежные вопросы