SVG 线性渐变未在 iOS Ionic/Angular 应用程序中呈现答案

【问题标题】：SVG linearGradient not rendering in iOS Ionic/Angular appSVG 线性渐变未在 iOS Ionic/Angular 应用程序中呈现
【发布时间】：2020-01-25 02:32:32
【问题描述】：

我有以下 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"，它会将其呈现为红色对象。

发生了什么事？我的线性渐变有什么问题？

【问题讨论】：

我认为 iOS 可能有一个错误，它需要渐变在使用它的元素之前。

标签： ios angular ionic-framework svg

【解决方案1】：

我的 index.html 中的 <base href="/"> 标签搞砸了。我删除了它，它起作用了。

【讨论】：