Question

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

我尝试使用transform-origin: 50% 50%;，transform-origin: 0 0;和transform-origin: center;，并尝试全部删除transform-origin，但由于缩放后的路径有偏移，因此没有一个按预期工作几个像素：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您的SVG artbox看起来很庞大，我相信这是问题的一部分。我尝试将其清理一下以适应SVG的内容，然后将元素包装在div内。

这里是SVG的比例更高的艺术框：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

希望它有所帮助！

悬停时缩放的svg路径不居中

1 个答案: