Ios SVG不适用于Iphone-（.htaccess是问题所在）

我对我的网站（）的动画SVG越来越着迷。在桌面上，它运行良好，SVG适合监视器（Chrome，Safari，Mac，Windows所有组合）以及Android设备，但在iPhone移动设备上，它不适合任何浏览器。 我试着使用viewBox，但几乎不可能使它适合具有相同输出的不同设备

<div class = "logo">

          <svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
              <circle class="r" cx="41%" cy="41%" r="8" ></circle>
              <circle class="r" cx="59%" cy="41%" r="8" ></circle>
              <circle class="r" cx="41%" cy="59%" r="8" ></circle>
              <circle class="r" cx="59%" cy="59%" r="8" ></circle></svg>
                      </div>

---

非常感谢

我有问题了！！问题是我正在使用的.htaccess文件强制http进入htpps。我不知道为什么，但是有了它，Svg就不能工作，没有它，Svg就工作得很好。

我遇到了问题！！问题是我正在使用的.htaccess文件强制http进入htpps。我不知道为什么，但是有了它Svg就不能工作，没有它Svg就工作得很好

.logo {
   position: absolute;
  top: -150px;
  z-index: -1;
  display: inline-block;
  max-width: 1225px;
  height: 250px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.logo svg {
  position: relative;
  left: 0px;
  top: -150px;
  right: 0;
  bottom: 0;
  width: 250px;
  margin: auto;
  fill: transparent;
  overflow: overlay;
}

.r {
  opacity: 0;
  stroke: #000000;
  stroke-width: 1px;
  stroke-dasharray: 130;
  -webkit-animation-name: vladi;
       -o-animation-name: vladi;
          animation-name: vladi;
  -webkit-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
       -o-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in;
       -o-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-transform-origin: center center;
       -o-transform-origin: center center;
          transform-origin: center center;
}


@keyframes vladi {
  0% {
    stroke-dashoffset: 130;
    stroke: #000000;
    opacity: 1;
  }

  60% {
    fill: transparent;
    stroke-dashoffset: 0;
    stroke: #000000;
    stroke-width: 1px;
    opacity: 1;
  }

  70% {
    fill: #000000;
  }

  91% {
    -webkit-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }

  92% {
    -webkit-transform: scale(0.9);
         -o-transform: scale(0.9);
            transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(2);
         -o-transform: scale(2);
            transform: scale(2);
    fill: #000000;
  }
}