iOS浏览器无法正确呈现SVG

时间:2020-05-15 04:16:49

标签: html ios svg

我有一个用于Chrome的SVG(如下),我试图在iOS Firefox(v25.1)上显示,但是SVG无法正确呈现。任何人都可以向我指出造成问题的原因吗?以下是Firefox iOS中呈现的内容。 (奖金:它的渲染也被边缘破坏了,快速浏览后看起来它也像野生动物园一样被破坏了)。
enter image description here
我知道SVG格式不正确(AFAIK),因为我能够在桌面Firefox(Windows)上正确呈现它。 SVG还通过了SVG 1.1(和SVG 1.1 Basic)验证。

  <svg width="99" height="98" viewBox="0 0 99 98" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M49.5905 97.4156C76.2285 97.4156 97.823 75.8212 97.823 49.1831C97.823 22.545 76.2285 0.95062 49.5905 0.95062C22.9524 0.95062 1.358 22.545 1.358 49.1831C1.358 75.8212 22.9524 97.4156 49.5905 97.4156Z" fill="white"/>
                <path d="M80.2844 57.9542C80.2844 40.9851 66.5601 27.2608 49.591 27.2608C32.6219 27.2608 18.8976 40.9851 18.8976 57.9542H27.6672C27.6672 45.8522 37.489 36.0303 49.591 36.0303C61.693 36.0303 71.5149 45.8522 71.5149 57.9542" fill="black" fill-opacity="0.1"/>
                <path d="M51.7836 71.9847C60.9858 71.9847 68.4457 64.5248 68.4457 55.3226C68.4457 46.1204 60.9858 38.6605 51.7836 38.6605C42.5813 38.6605 35.1214 46.1204 35.1214 55.3226C35.1214 64.5248 42.5813 71.9847 51.7836 71.9847Z" fill="black" fill-opacity="0.1"/>
                <path d="M49.5912 67.1613C59.5199 67.1613 67.5687 59.1125 67.5687 49.1838C67.5687 39.2551 59.5199 31.2062 49.5912 31.2062C39.6624 31.2062 31.6136 39.2551 31.6136 49.1838C31.6136 59.1125 39.6624 67.1613 49.5912 67.1613Z" fill="url(#paint0_linear)"/>
                <path d="M93.4388 27.2605C81.3807 2.96891 51.8712 -6.94067 27.6234 5.16129C20.0377 8.9322 13.5921 14.5886 8.81273 21.5603L28.5442 55.7615C24.9048 44.2296 31.3066 31.9084 42.8824 28.269C44.8994 27.6113 47.0479 27.3044 49.1526 27.2605" fill="url(#paint1_linear)"/>
                <path d="M8.81234 21.559C-6.27127 44.0967 -0.264137 74.6147 22.2736 89.6983C29.2454 94.39 37.3134 97.1963 45.6444 97.854L66.2528 62.7758C58.5356 72.1154 44.7236 73.4308 35.3841 65.7136C32.227 63.0828 29.8592 59.6188 28.5438 55.7602" fill="url(#paint2_linear)"/>
                <path d="M45.6444 97.8556C72.6985 99.9164 96.2885 79.6149 98.3055 52.6047C98.9632 43.8791 97.297 35.1534 93.4384 27.2608H49.1522C61.2542 27.3046 71.0323 37.1704 70.9884 49.2723C70.9446 54.1833 69.3222 58.9188 66.2528 62.7774" fill="url(#paint3_linear)"/>
                <path d="M8.81273 21.5605L28.5442 55.7618C27.0972 50.8508 27.4042 45.5891 29.4212 40.8535L9.68968 20.2451" fill="url(#paint4_linear)"/>
                <path d="M45.6447 97.8558L66.2531 62.7776C63.0084 66.6362 58.492 69.3109 53.5373 70.2317L44.7677 97.8558" fill="url(#paint5_linear)"/>
                <path d="M93.4384 27.2608H49.1523C55.8171 27.3046 62.1312 30.374 66.2529 35.5918L94.3154 28.5762" fill="url(#paint6_linear)"/>
                <defs>
                  <linearGradient id="paint0_linear" x1="49.5843" y1="31.1984" x2="49.5843" y2="67.1535" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#81B4E0"/>
                    <stop offset="1" stop-color="#0C5A94"/>
                  </linearGradient>
                  <linearGradient id="paint1_linear" x1="51.1176" y1="0.064787" x2="51.1176" y2="39.9662" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#F06B59"/>
                    <stop offset="1" stop-color="#DF2227"/>
                  </linearGradient>
                  <linearGradient id="paint2_linear" x1="12.4302" y1="84.0802" x2="32.6001" y2="50.756" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#388B41"/>
                    <stop offset="1" stop-color="#4CB749"/>
                  </linearGradient>
                  <linearGradient id="paint3_linear" x1="79.9989" y1="87.6265" x2="58.5135" y2="35.8862" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#E4B022"/>
                    <stop offset="0.3" stop-color="#FCD209"/>
                  </linearGradient>
                  <linearGradient id="paint4_linear" x1="19.1087" y1="54.4361" x2="19.1087" y2="19.358" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-opacity="0.15"/>
                    <stop offset="0.3" stop-opacity="0.06"/>
                    <stop offset="1" stop-opacity="0.03"/>
                  </linearGradient>
                  <linearGradient id="paint5_linear" x1="67.5261" y1="65.764" x2="43.4098" y2="90.3187" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-opacity="0.15"/>
                    <stop offset="0.3" stop-opacity="0.06"/>
                    <stop offset="1" stop-opacity="0.03"/>
                  </linearGradient>
                  <linearGradient id="paint6_linear" x1="67.1766" y1="72.83" x2="70.6844" y2="38.1903" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-opacity="0.15"/>
                    <stop offset="0.3" stop-opacity="0.06"/>
                    <stop offset="1" stop-opacity="0.03"/>
                  </linearGradient>
                </defs>
              </svg> 

0 个答案:

没有答案