CSS анимация SVG форма не по центру - PullRequest
Новая
       6

CSS анимация SVG форма не по центру

0 голосов
/ 03 октября 2018

Я пытаюсь заставить элемент # овального хода пульсировать наружу от центра # first-oval, но он продолжает двигаться сверху вниз слева направо.Есть идеи, почему это может быть?У меня есть положение, установленное на относительное с левым и верхним на 0. 

    #first-oval {
	  stroke-width: 2px;
	  stroke-opacity: 1;
    }

	#oval-stroke {
	  position: relative;
	  top: 0%;
	  left: 0%;
	  fill: white;
	  fill-opacity: 0;
    animation: pulse 4s forwards infinite;
	}

	@keyframes pulse {
	  from {
	    stroke-opacity: 1;
	    transform: scale(0.5);
	  }
	  to {
	    stroke-width: 0;
	    stroke-opacity: 0;
	    transform: scale(2);
	  }
	}
    <svg width="300" height="300" class="svgExample" expanded="true" xmlns="http://www.w3.org/2000/svg">
      <circle id="first-oval" fill="red" fill-rule="nonzero" cx="92.5" cy="73.5" r="8.5" stroke-width="1" stroke="black"></circle>
      <circle id="oval-stroke" fill="red" fill-rule="nonzero" cx="92.5" cy="73.5" r="8.5" stroke-width="1" stroke="black" stroke-linecap="round"></circle>
    </svg>

1 Ответ

0 голосов
/ 03 октября 2018

Вам необходимо добавить это к вашему # овальному штриху: 

transform-origin: 50% 50%;
transform-box: fill-box;

transform-origin: 50% 50%; означает, что преобразование должно происходить вокруг центра элемента.

Однако некоторые браузеры используют центр холста SVG как источник преобразования.Чтобы решить эту проблему, я добавляю transform-box: fill-box;

 #first-oval {
	  stroke-width: 2px;
	  stroke-opacity: 1;
    }

	#oval-stroke {
	  position: relative;
	  top: 0%;
	  left: 0%;
	  fill: white;
	  fill-opacity: 0;
    /*************************/
    transform-origin: 50% 50%;
    transform-box: fill-box;
    /*************************/
    animation: pulse 4s forwards infinite;
	}

	@keyframes pulse {
	  from {
	    stroke-opacity: 1;
	    transform: scale(0.5);
	  }
	  to {
	    stroke-width: 0;
	    stroke-opacity: 0;
	    transform: scale(2);
	  }
	}
<svg width="300" height="300" class="svgExample" expanded="true" xmlns="http://www.w3.org/2000/svg">
      <circle id="first-oval" fill="red" fill-rule="nonzero" cx="92.5" cy="73.5" r="8.5" stroke-width="1" stroke="black"></circle>
      <circle id="oval-stroke" fill="red" fill-rule="nonzero" cx="92.5" cy="73.5" r="8.5" stroke-width="1" stroke="black" stroke-linecap="round"></circle>
    </svg>
...