SVG вписывание symbol в блок

#css #css3 #svg

Подскажите, пожалуйста, как переназначенный символ SVG вписать в блок с нужными размерами
? Приведу простой пример 



.home_page .logo_link {
  left: 50%;
  display: block;
  transform: translate(-50%, 70%);
  width: 290px;
  border: 1px solid #f00;
}

.logoBuble_white {
  fill: #fff
}

.logoBuble_harlequin {
  fill: #f00
}

.bl_businessInfo__logo {
  position: relative;
  display: block;
  margin-right: 29px;
  width: 112px;
  border: 1px solid green;
}

  
    
  







  

    
      
    
  







Есть SVG логотип в шапке сайта, как сделать его копию в подвале, но что б она вмещалась
в блоке bl_businessInfo__logo с width=112px ? Я не понимаю, почему происходит смещение,
пробовал и width=100% для потомка задавать и ещё всякие хитрости c viewBox="0 0 112
94", но пока не получается решить. 
    

Ответы

Ответ 1

Задать viewBox & width атрибуты для  в footer'е, а вообще желательно
для вложенного элемента ссылки передавать ширину относительно родителя с помощью inherit:



.home_page .logo_link {
  left: 50%;
  display: block;
  transform: translate(-50%, 70%);
  width: 290px;
  border: 1px solid #f00;
}

.logoBuble_white {
  fill: #fff
}

.logoBuble_harlequin {
  fill: #f00
}

.bl_businessInfo__logo {
  position: relative;
  display: block;
  margin-right: 29px;
  width: 112px;
  border: 1px solid green;
}