SVG анимация не работает, как ожидалось, на моей странице - PullRequest
Новая
       4

SVG анимация не работает, как ожидалось, на моей странице

0 голосов
/ 30 августа 2018

Моя анимация SVG не работает, как я ожидал на моей странице, предварительный просмотр выглядит хорошо, но он не работает на моей странице. Вот мой код SVG: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="450" width="450" margin-top="20px">
       
        <image x="0" y="0" width="450" height="450" xlink:href="https://test.creapowa.com/ke/data/User/Minty/home/desktop/Elastic/img/roundtripplain.svg"></image>
  <defs>
    <path id="basePath" d="M 120,150 A 280 500 0 0 1 320,145 L320 145 360 150 "></path>
    <mask id="mask">
      <use xlink:href="#basePath" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
        <animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
      </use>
    </mask>
  </defs>
  <circle r="4" cx="120" cy="150" fill="#c86706"></circle>

  <circle fill="#c86706" cy="150" cx="360" r="4"></circle>
  
  <use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask)"></use>
  <path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
    <animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
      <mpath xlink:href="#basePath"></mpath>
    </animatemotion>
  </path>  
  

   <defs>
    <path id="basePath1" d="M 330,330 A 500 1500 0 0 1 120,330"></path>
    <mask id="mask1">
      <use xlink:href="#basePath1" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
        <animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
      </use>
     </mask>
  </defs>
  <circle r="4" cx="120" cy="330" fill="#c86706"></circle>
  <circle fill="#c86706" cy="330" cx="330" r="4"></circle>
  <use xlink:href="#basePath1" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask1)"></use>
  <path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
    <animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
      <mpath xlink:href="#basePath1"></mpath>
    </animatemotion>
  </path>
</svg>

Но на моей странице (браузер Chrome), штрих-черточка и отсутствует, и координата не в том месте, как мои ожидания в верхней части, это хорошо в нижней части. как изображение ниже:

В верхней части отсутствуют штрихи, и координаты не в нужном месте

Мне нужно было добавить больше функций? Пожалуйста, помогите мне разобраться,

Спасибо,

...