CSS动画SVG形状未居中

Question

我正在尝试使＃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>

Answer 1

您需要将其添加到＃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>