CODEWITHSUNDEEP
svgsprite
Воронович Юлия
Воронович Юлия

Reputation: 33

svg sprite (lineargradient) not working in Safari

    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<linearGradient id="paint0_linear_1874_963" x1="10.6667" y1="11.5" x2="25.1725" y2="32.7129" gradientUnits="userSpaceOnUse">
<stop stop-color="#5BA0F0"/>
<stop offset="1" stop-color="#4170D0"/>
</linearGradient>
<linearGradient id="paint0_linear_1874_966" x1="11.4444" y1="10.8333" x2="30.3889" y2="31.6111" gradientUnits="userSpaceOnUse">
<stop stop-color="#5BA0F0"/>
<stop offset="1" stop-color="#4170D0"/>
</linearGradient>
 </defs>

  <symbol id="icon-backup">
    <circle cx="20" cy="20" r="20" fill="white"/>
    <path d="M20 10C23.1242 10 25.7279 12.2294 26.3072 15.1844C29.511 15.5491 32 18.2695 32 21.5714C32 25.1218 29.1223 28 25.5725 28H21.3745V22.8567H24.2529L19.9888 17.6252L15.7246 22.8567H18.6325V28H14.4275C10.8777 28 8 25.1218 8 21.5714C8 18.2695 10.489 15.5491 13.6928 15.1844C14.2721 12.2294 16.8758 10 20 10Z" fill="url(#paint0_linear_1874_963)"/>
  </symbol>

  <symbol id="icon-admin">
    <circle cx="20" cy="20" r="20" fill="white"/>
    <rect x="9" y="9" width="22" height="22" rx="11" fill="url(#paint0_linear_1874_966)"/>
    <path d="M15.1585 24H20.4053C20.4343 21.1129 20.475 15.3134 20.4053 15.2118C20.3182 15.0847 20.2094 15 20.0134 15C19.8175 15 19.6651 15.0635 19.578 15.2118C19.4909 15.36 18.0105 17.4988 17.771 17.8376C17.5315 18.1765 17.4009 18.2188 17.2485 18.2188C17.0961 18.2188 17.0308 18.1976 16.9655 18.1553C16.9132 18.1214 15.71 17.2376 15.1149 16.8C14.919 16.6518 14.6142 16.3765 14.3965 16.3765C14.0264 16.3765 13.9828 16.6518 14.0046 16.8C14.022 16.9186 14.5053 19.9129 14.7448 21.3953V23.0682C14.7448 23.4494 14.8101 24 15.1585 24Z" fill="white"/>
    <path d="M24.8415 24H19.5947C19.5657 21.1129 19.525 15.3134 19.5947 15.2118C19.6818 15.0847 19.7906 15 19.9866 15C20.1825 15 20.3349 15.0635 20.422 15.2118C20.5091 15.36 21.9895 17.4988 22.229 17.8376C22.4685 18.1765 22.5991 18.2188 22.7515 18.2188C22.9039 18.2188 22.9692 18.1976 23.0345 18.1553C23.0868 18.1214 24.29 17.2376 24.8851 16.8C25.081 16.6518 25.3858 16.3765 25.6035 16.3765C25.9736 16.3765 26.0172 16.6518 25.9954 16.8C25.978 16.9186 25.4947 19.9129 25.2552 21.3953V23.0682C25.2552 23.4494 25.1899 24 24.8415 24Z" fill="white"/>
  </symbol>

There is this big svg sprite. We insert each icon using an identifier in the html. and they are provided perfectly in all browsers, but not in Safari... there they are in the default color. According to Google search, there are options that the problem is in gradients, but no solution has been found, except to wrap it in definitions. Inline, if you insert svg, it displays well in Safari as well. but I want to take them out ((maybe anyone has encountered this?

Upvotes: 1

Views: 41

Answers (0)

Related Questions