Question

我有以下svg：

<svg
  class="cu-onboarding__login-container-gradient-object-bottom"
  width="800"
  height="314"
  viewBox="0 0 375 314"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M59.1055 231.889C92.1114 207.309 133.608 198.845 172.433 186.598C197.996 178.534 219.893 164.86 243.453 152.356C303.352 120.566 376.181 98.9861 424.044 150.47C463.933 193.376 471.775 279.363 427.797 333.873C412.585 352.726 393.211 363.569 372.415 370.098C359.93 374.019 344.434 375.011 333.956 385.621C322.908 396.813 319.771 415.91 315.573 430.508C309.332 452.239 302.685 475.063 289.413 493.687C258.966 536.419 222.943 523.336 192.068 489.499C177.06 473.049 164.539 454.553 150.567 437.257C130.752 412.728 106.278 399.301 78.8891 384.535C54.4984 371.386 29.5248 354.466 20.3018 328.335C9.83631 298.685 23.4443 264.712 46.095 242.903C50.2548 238.898 54.6005 235.244 59.1055 231.889Z"
    fill="url(#paint2_linear)"
  />
  <defs>
    <linearGradient
      id="paint2_linear"
      x1="225.411"
      y1="-47.5534"
      x2="-120.158"
      y2="88.7281"
      gradientUnits="userSpaceOnUse"
    >
      <stop stop-color="#FFBB11" />
      <stop offset="1" stop-color="#FF3FA8" />
    </linearGradient>
  </defs>
</svg>

这可以在Chrome，Safari和Android中很好地呈现，但是在iOS（使用ionic构建）中，它无法呈现。只是空白。

如果我将fill="url(#paint2_linear)"更改为fill="red"，则会将其呈现为红色对象。

这是怎么回事？我的linearGradient有什么问题？

Answer 1

index.html中的<base href="/">标签使事情变得混乱了。我将其删除，并且有效。

SVG linearGradient无法在iOS Ionic / Angular应用中呈现

1 个答案: