css - CSS动画svg形状未居中

我正在尝试让＃oval-stroke元素脉冲从＃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>

最佳答案

您需要将此添加到＃oval-stroke：

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>