SVG масштаб в пределах деления от центра CSS

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 до конца, применяя его к тегу container / 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 см. Здесь

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

transform-origin: 50% 50%; должно центрировать его.