Question

在将某些.png图标替换为.svg时，我遇到了一些问题，请考虑以下问题：

<div class="container"></div>

.container {
    width: 100px;
    height: 100px;
    background-image: url("some-image.png");
    background-size: cover;
    transition: 1s;
}

在这种情况下，我已将CSS过渡应用于container并更改其大小（放大）。 container内的图像从中心点到与容器成一直线的比例放大。

但是当我将其更改为.svg代码（波纹管）时，它开始从左上角开始缩放。使用我当前的设置（或完全设置），是否可以使其从container的中心缩放？

<div class="container"> <svg></svg> </div>

.container {
    width: 100px;
    height: 100px;
    transition: 1s;        
}

///我已经尝试过尽可能transform-origin的播放，并将其应用于容器/ svg标签/及其内部的所有元素...

Answer 1

这不是答案，但我需要添加一些代码。我没什么区别。请看一下。首先，我使用两个元素的图像。

.container {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  border: 1px solid;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png");
  background-size: cover;
  transition: 1s;
}

.svg {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.svg");
  left: 250px;
}

.container:hover {
  width: 200px;
  height: 200px;
}

<div class="container"></div>

<div class="container svg"></div>

第二次尝试：这次我使用的是svg元素，而不是第二个div的背景图像。也没有区别。

.container {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  border: 1px solid;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png");
  background-size: cover;
  transition: 1s;
  
  overflow:hidden;
}

.svg {
  background:black;
  left: 250px;
}



.container:hover {
  width: 200px;
  height: 200px;
}

<div class="container"></div>

<div class="container svg">
  <svg  viewBox="41 54 106 122">
<g>
	<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z"/>
</g>
<g>
	<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M118.575,54.609c0,0,0.9,5.625-1.35,10.349
		s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z"/>
</g>
</svg>

</div><div class="container"></div>

<div class="container svg">
  <svg  viewBox="41 54 106 122">
<g>
	<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M143.099,93.757c0,0-14.173,8.549-13.724,23.173 c0.449,14.624,11.954,23.413,15.974,24.073c1.569,0.258-9.245,22.049-15.984,27.448c-6.74,5.4-13.714,6.524-24.513,2.25c-10.8-4.275-18.449,0.275-24.749,2.612c-6.299,2.337-13.949-0.137-24.298-14.987c-10.349-14.849-21.823-49.271-6.074-66.146c15.749-16.874,33.298-10.124,38.022-7.875c4.725,2.25,13.05,2.025,22.499-2.25C119.7,77.782,138.374,86.782,143.099,93.757z"/>
</g>
<g>
	<path fill="#FFFFFF" stroke="#ED1D24" stroke-width="2" stroke-miterlimit="10" d="M118.575,54.609c0,0,0.9,5.625-1.35,10.349
		s-10.718,20.936-22.994,17.999c-0.308-0.073-2.102-5.506,0.532-11.027C98.48,64.138,108.171,55.399,118.575,54.609z"/>
</g>
</svg>

</div>

也许您应该编辑问题并添加更多详细信息

Answer 2

我找到了问题以及解决方法

仅对height和width设置动画时，一切似乎都很好，但是我的某些图标具有top和left属性作为动画。这些都是表兄弟的问题。

在我的情况下，svg似乎在调整容器大小时不断“跳”到左上角，但实际上它只是捕捉到整个像素值。

top/left属性的动画是不是子像素，因此，要使其平滑地进行动画处理，最好对X和Y进行动画处理，而不是直接对其进行操作。

当我这样做时，问题就消失了。

Answer 3

尝试使用CSS属性transform-origin see here

div {
  transform-origin: 50% 50%;
}

transform-origin: 50% 50%;应该居中。

距中心CSS的div内的SVG比例

3 个答案: