0

I'm experiencing a strange behaviour in Safari where once I remove the first of two identical SVG elements, parts of the second disappear.

This is probably an issue of losing a reference to the gradient defined in the first SVG, but if that's the case, I don't know how to work around this.

Here's me demoing it.

Here are the two SVGs next to eachother:

    <svg width="100" viewBox="0 0 50 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M41.8349 19.8435L45.4917 14.1682C45.7032 13.8361 46.1867 13.7154 46.5192 13.9569L47.9396 14.8927C48.272 15.104 48.3929 15.587 48.1511 15.9191L44.4944 21.5642C44.2828 21.8963 43.7993 22.0171 43.4669 21.7756L42.0465 20.8397C41.714 20.6586 41.5932 20.1756 41.8349 19.8435Z" fill="white"/>
      <path d="M36.4555 20.0852C36.3346 19.9947 35.7 19.5418 36.0928 18.9381L42.1975 9.48922C42.409 9.15715 42.8926 9.0364 43.225 9.2779L44.6454 10.2137C44.9778 10.425 45.0987 10.9081 44.8569 11.2401L38.7523 20.7192C38.5407 21.0512 38.0572 21.172 37.7248 20.9305L36.4555 20.0852Z" fill="white"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8013 20.0787C12.7981 20.081 12.7952 20.0832 12.7925 20.0852L11.5233 20.9003C11.1908 21.1418 10.7073 21.021 10.4957 20.689L4.3911 11.2099C4.14933 10.8779 4.27021 10.3949 4.60264 10.1835L6.02303 9.2779C6.35546 9.0364 6.839 9.15715 7.05055 9.48922L13.1552 18.9381C13.5394 19.5285 12.941 19.9746 12.8013 20.0787ZM3.78661 14.1684L7.44335 19.8437C7.6549 20.1758 7.56424 20.6588 7.23181 20.8701L5.81142 21.8059C5.47899 22.0474 4.99545 21.9267 4.7839 21.5946L1.12716 15.9193C0.885392 15.5872 1.00628 15.1042 1.33871 14.8929L2.7591 13.957C3.09153 13.7155 3.57506 13.8363 3.78661 14.1684Z" fill="white"/>
      <path d="M21.3147 19.27L28.9002 7.37595L25.2132 1.64022C24.9412 1.21759 24.3368 1.21759 24.0648 1.64022L19.441 8.7646L19.1992 9.15704C18.897 9.60986 18.2322 9.60986 17.9602 9.15704L12.9133 1.33834C12.7017 1.00627 12.2182 0.885517 11.8857 1.12702L7.05038 4.23639C6.71795 4.44771 6.59706 4.93071 6.83883 5.26278L14.2732 16.7946L18.081 22.7115C18.3228 23.0737 18.8366 23.0737 19.0783 22.7115L21.3147 19.27Z" fill="url(#paint0_linear)"/>
      <path d="M42.2099 4.22304L37.3745 1.11368C37.0421 0.90236 36.5585 0.992924 36.347 1.32499L31.3303 9.14369C31.0281 9.59651 30.3632 9.59651 30.0912 9.14369L29.8495 8.75125L25.2257 1.62687C24.9537 1.20424 24.3492 1.20424 24.0773 1.62687L20.7227 6.81921L19.6348 8.50974C19.6348 8.50974 20.481 7.51354 21.1458 8.57012L27.9758 19.2567L30.2121 22.7283C30.4539 23.0906 30.9676 23.0906 31.2094 22.7283L35.0173 16.8115L42.4516 5.24944C42.6632 4.88718 42.5725 4.43436 42.2099 4.22304Z" fill="url(#paint1_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="10.4186" y1="9.20336" x2="23.5844" y2="9.20336" gradientUnits="userSpaceOnUse">
          <stop stop-color="white"/>
          <stop offset="1" stop-color="#D8D8D8"/>
        </linearGradient>
        <linearGradient id="paint1_linear" x1="22.7743" y1="3.22807" x2="36.953" y2="18.2169" gradientUnits="userSpaceOnUse">
          <stop stop-color="white"/>
          <stop offset="1" stop-color="#E7E7E7"/>
        </linearGradient>
      </defs>
    </svg>
  
    
    <svg width="100" viewBox="0 0 50 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M41.8349 19.8435L45.4917 14.1682C45.7032 13.8361 46.1867 13.7154 46.5192 13.9569L47.9396 14.8927C48.272 15.104 48.3929 15.587 48.1511 15.9191L44.4944 21.5642C44.2828 21.8963 43.7993 22.0171 43.4669 21.7756L42.0465 20.8397C41.714 20.6586 41.5932 20.1756 41.8349 19.8435Z" fill="white"/>
      <path d="M36.4555 20.0852C36.3346 19.9947 35.7 19.5418 36.0928 18.9381L42.1975 9.48922C42.409 9.15715 42.8926 9.0364 43.225 9.2779L44.6454 10.2137C44.9778 10.425 45.0987 10.9081 44.8569 11.2401L38.7523 20.7192C38.5407 21.0512 38.0572 21.172 37.7248 20.9305L36.4555 20.0852Z" fill="white"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8013 20.0787C12.7981 20.081 12.7952 20.0832 12.7925 20.0852L11.5233 20.9003C11.1908 21.1418 10.7073 21.021 10.4957 20.689L4.3911 11.2099C4.14933 10.8779 4.27021 10.3949 4.60264 10.1835L6.02303 9.2779C6.35546 9.0364 6.839 9.15715 7.05055 9.48922L13.1552 18.9381C13.5394 19.5285 12.941 19.9746 12.8013 20.0787ZM3.78661 14.1684L7.44335 19.8437C7.6549 20.1758 7.56424 20.6588 7.23181 20.8701L5.81142 21.8059C5.47899 22.0474 4.99545 21.9267 4.7839 21.5946L1.12716 15.9193C0.885392 15.5872 1.00628 15.1042 1.33871 14.8929L2.7591 13.957C3.09153 13.7155 3.57506 13.8363 3.78661 14.1684Z" fill="white"/>
      <path d="M21.3147 19.27L28.9002 7.37595L25.2132 1.64022C24.9412 1.21759 24.3368 1.21759 24.0648 1.64022L19.441 8.7646L19.1992 9.15704C18.897 9.60986 18.2322 9.60986 17.9602 9.15704L12.9133 1.33834C12.7017 1.00627 12.2182 0.885517 11.8857 1.12702L7.05038 4.23639C6.71795 4.44771 6.59706 4.93071 6.83883 5.26278L14.2732 16.7946L18.081 22.7115C18.3228 23.0737 18.8366 23.0737 19.0783 22.7115L21.3147 19.27Z" fill="url(#paint0_linear)"/>
      <path d="M42.2099 4.22304L37.3745 1.11368C37.0421 0.90236 36.5585 0.992924 36.347 1.32499L31.3303 9.14369C31.0281 9.59651 30.3632 9.59651 30.0912 9.14369L29.8495 8.75125L25.2257 1.62687C24.9537 1.20424 24.3492 1.20424 24.0773 1.62687L20.7227 6.81921L19.6348 8.50974C19.6348 8.50974 20.481 7.51354 21.1458 8.57012L27.9758 19.2567L30.2121 22.7283C30.4539 23.0906 30.9676 23.0906 31.2094 22.7283L35.0173 16.8115L42.4516 5.24944C42.6632 4.88718 42.5725 4.43436 42.2099 4.22304Z" fill="url(#paint1_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="10.4186" y1="9.20336" x2="23.5844" y2="9.20336" gradientUnits="userSpaceOnUse">
          <stop stop-color="white"/>
          <stop offset="1" stop-color="#D8D8D8"/>
        </linearGradient>
        <linearGradient id="paint1_linear" x1="22.7743" y1="3.22807" x2="36.953" y2="18.2169" gradientUnits="userSpaceOnUse">
          <stop stop-color="white"/>
          <stop offset="1" stop-color="#E7E7E7"/>
        </linearGradient>
      </defs>
    </svg>
  
  

Here's a jsbin playground.

Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125

0 Answers0