悬停时缩放的 svg 路径未居中答案

【问题标题】：Scaled svg path on hover is not centered悬停时缩放的 svg 路径未居中
【发布时间】：2018-08-20 00:01:41
【问题描述】：

我有一个 svg <path> 我想在鼠标悬停时缩放。缩放后的路径应该在其原始位置的顶部居中。我已经阅读了其他类似的帖子，但无法完成。

我尝试使用transform-origin: 50% 50%;、transform-origin: 0 0; 和transform-origin: center;，并尝试从头到尾删除transform-origin，但它们都没有按预期工作，因为缩放的路径有几个像素的偏移：

path {
  fill: #f00
}

path:hover {
  fill: #000;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  transform-origin: 50% 50%;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 881 571" pointer-events="fill" fill="none" fill-opacity="1">
        <path d="M447 263h1-1 1v-1 1h1-1 1-1 1v1h1-1 2v1h1v1h-1 1-1v1h1v1h1-1v1h-1v1-1 1h-1v1h-1v3h-1v-1h-2v-1h-1v-1h-2v-2h-1v-3h-1v-1h1-1 1v-1h1v-2h1-1v1-2 1h1v1h1v-1h1v1h1z"/>
      </svg>

【问题讨论】：

标签： css svg scale css-transforms

【解决方案1】：

您的 SVG 艺术框看起来很大，我相信这是问题的一部分。我尝试对其进行一些清理以适应 SVG 的内容，并将元素包裹在 div 中。

这是具有更比例艺术框的 SVG：

svg {
  display: block;
  width: 100%;
  height: auto;
}

div {
  fill: #f00;
  width:127px;
  height:150px;
  margin-left: 50px;
  margin-top: 50px;
}

div:hover {
  fill: #000;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  transform-origin: 50% 50%;
}

<div>
    <svg xmlns="http://www.w3.org/2000/svg"><path d="M65.5 23.583h10.583H65.5h10.583V13v10.583h10.584-10.584 10.584-10.584 10.584v10.584H97.25 86.667h21.166V44.75h10.584v10.583h-10.584 10.584-10.584v10.584h10.584V76.5H129h-10.583v10.583h-10.584v10.584-10.584 10.584H97.25v10.583H86.667V140H76.083v-10.583H54.917v-10.584H44.333V108.25H23.167V87.083H12.583v-31.75H2V44.75h10.583H2h10.583V34.167h10.584V13H33.75 23.167v10.583V2.417 13H33.75v10.583h10.583V13h10.584v10.583H65.5z"/>
    </svg>
</div>

希望对你有帮助！

【讨论】：