Как изменить размер одного из нескольких path внутри тега

115

27 ноября 2021, 00:10

У меня есть иконка Facebook ниже её SVG код

<svg version="1.1" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 291.319 291.319" style="enable-background:new 0 0 291.319 291.319;" xml:space="preserve"> 
                <g> 
                    <path style="fill:#3B5998;" d="M145.659,0c80.45,0,145.66,65.219,145.66,145.66c0,80.45-65.21,145.659-145.66,145.659 
              S0,226.109,0,145.66C0,65.219,65.21,0,145.659,0z" /> 
                    <path style="fill:#FFFFFF;" d="M163.394,100.277h18.772v-27.73h-22.067v0.1c-26.738,0.947-32.218,15.977-32.701,31.763h-0.055 
              v13.847h-18.207v27.156h18.207v72.793h27.439v-72.793h22.477l4.342-27.156h-26.81v-8.366 
              C154.791,104.556,158.341,100.277,163.394,100.277z" /> 
                </g> 
            </svg>

Логотип f находится внутри круга, и я хочу сделать его меньше. Я пытаюсь понять, как это сделать, но безуспешно. Получается только уменьшить иконку в целом.

У меня есть несколько таких SVG-иконок, у которых мне нужно выборочно уменьшить только внутренние элементы. При уменьшении одного path (символ f) он смещается влево и вверх относительно внешнего круга.
Как сделать уменьшение f по центру внешнего круга?

Answer 1

Чтобы символ f не смещался при изменении его размера, необходимо использовать правило CSS transform-box : fill-box

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

Это правило очень полезно, так как избавляет от поиска и указания центра трансформируемой фигуры, как при scale так и при других трансформациях, например: вращения.

Найдите в SVG иконке Facebook фрагмент кода, который отвечает за вывод символа F Присвойте ему класс и используйте правило CSS transform-box:fill-box;

Ниже в коде размер символа f уменьшен на 20%

.facebook { 
transform-box: fill-box; 
transform-origin: center center; 
transform: scale(0.8);  
}

<svg version="1.1" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 291.319 291.319" style="enable-background:new 0 0 291.319 291.319;" xml:space="preserve"> 
            <g> 
                <path style="fill:#3B5998;" d="M145.659,0c80.45,0,145.66,65.219,145.66,145.66c0,80.45-65.21,145.659-145.66,145.659 
          S0,226.109,0,145.66C0,65.219,65.21,0,145.659,0z" /> 
             </g>  
		<g> 	  
		  <path class="facebook" style="fill:#fff;" d="M163.394,100.277h18.772v-27.73h-22.067v0.1c-26.738,0.947-32.218,15.977-32.701,31.763h-0.055 
          v13.847h-18.207v27.156h18.207v72.793h27.439v-72.793h22.477l4.342-27.156h-26.81v-8.366 
          C154.791,104.556,158.341,100.277,163.394,100.277z" /> 
            </g> 
        </svg>

Чтобы показать, что символ f не теряет центральной позиции при уменьшении, увеличении размера, запустите код:

анимация JS + SVG

var svg1 = document.getElementById("svg1"), 
  scale = document.getElementById('an_scale'), 
  reduce = document.getElementById('an_reduce'); 
   
 svg1.addEventListener('mouseover', () => { 
   scale.beginElement(); 
});  
 
   svg1.addEventListener('mouseleave', () => { 
   reduce.beginElement(); 
});

.facebook { 
transform-box: fill-box; 
transform-origin: center center; 
fill:#fff; 
}

<svg id="svg1" version="1.1" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 291.319 291.319" style="enable-background:new 0 0 291.319 291.319;" xml:space="preserve"> 
            
                <path style="fill:#3B5998;" d="M145.659,0c80.45,0,145.66,65.219,145.66,145.66c0,80.45-65.21,145.659-145.66,145.659 
          S0,226.109,0,145.66C0,65.219,65.21,0,145.659,0z" /> 
			 	  
		  <path class="facebook"  transform="scale(0.8)" d="M163.394,100.277h18.772v-27.73h-22.067v0.1c-26.738,0.947-32.218,15.977-32.701,31.763h-0.055 
          v13.847h-18.207v27.156h18.207v72.793h27.439v-72.793h22.477l4.342-27.156h-26.81v-8.366 
          C154.791,104.556,158.341,100.277,163.394,100.277z" > 
		    <!--  анимация увеличения символа `F` при наведении  --> 
			 <animateTransform id="an_scale" 
			    attributeName="transform" 
				type="scale" 
				begin="indefinite" 
				dur="0.4s" 
				values="0.8;1.5" 
				fill="freeze"/>  
           <!--  анимация уменьшенич символа `F` при уходе курсора -->				 
			     <animateTransform id="an_reduce" 
				  attributeName="transform" 
				  type="scale" 
				  begin="indefinite" 
				  dur="0.4s" 
				  values="1.5;0.8" 
				  fill="freeze"/>  
		  </path>	  
             
        </svg>