Возникли проблемы при перемещении / анимации моего логотипа svg определенным образом - PullRequest
Новая
       22

Возникли проблемы при перемещении / анимации моего логотипа svg определенным образом

0 голосов
/ 27 февраля 2019

Это мой svg логотип для моего сайта.Я хочу, чтобы каждая метка открывалась шире, когда центральная кисть стоит прямо.Я играл со свойствами перевода, но я никуда не добираюсь.Таким образом, чтобы подвести итог ...

id из Tag_R необходимо переместиться вправо на то же расстояние, что и id из Tag_L, чтобы выглядело, как будто он открывает рот.В то же время я хочу, чтобы кисть (id из Brus ч) стояла прямо, указывая вверх. 

svg {
  width:350px;
  text-align:center;
  display:block;
  margin:auto;
}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 145"><defs><style>.cls-1{fill:black;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Logo"><g id="Logo_1" data-name="Logo 1"><path id="Tag_R" class="cls-1" d="M160.91,48.19h0a5.18,5.18,0,0,0,1.69,3.9l40.5,38.6L162.62,129a5.14,5.14,0,0,0-1.71,3.92v.72c0,4.1,4.12,6.38,6.91,3.82l46.5-42.73a5.18,5.18,0,0,0,0-7.64l-46.5-42.72C165,41.81,160.91,44.09,160.91,48.19Z"/><path id="Tag_L" class="cls-1" d="M55.09,48.53h0a5.2,5.2,0,0,1-1.69,3.91L12.9,91l40.48,38.3a5.16,5.16,0,0,1,1.71,3.92V134c0,4.1-4.12,6.38-6.91,3.82L1.68,95.07a5.17,5.17,0,0,1,0-7.63l46.5-42.73C51,42.15,55.09,44.43,55.09,48.53Z"/><g id="Brush"><path class="cls-1" d="M115,44.12c.7,9.7,12.05,11,19.74,10.59,5.76-.32-38.44,72.41-50.48,89.72-.94,1.36-2.22.09-1.7-1.68C89.13,120.48,114.38,35.67,115,44.12Z"/><path class="cls-1" d="M121.67,24.62c6.79-7.1,23.19-16,25.94-24.62,0,0,1.9,50.74-15.16,51.3C119.81,51.71,109.72,37.09,121.67,24.62Z"/></g><path id="Eye_R" class="cls-1" d="M147.68,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S152.42,75,147.68,75Zm0,13.6a4,4,0,1,1,3.56-4A3.79,3.79,0,0,1,147.68,88.61Z"/><path id="Eye_L" class="cls-1" d="M68.87,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S73.61,75,68.87,75Zm0,13.6a4,4,0,1,1,3.56-4A3.8,3.8,0,0,1,68.87,88.61Z"/></g></g></g></svg>

1 Ответ

0 голосов
/ 27 февраля 2019

После перевода вам нужно изменить viewBox вашего svg элемента на большую иконку.Чтобы сделать это правильно, вы можете использовать Logo.getBBox().Это вернет объект с новым размером вашего логотипа.Надеюсь, это поможет.

Также вам нужно найти центр кисти, чтобы можно было установить центр вращения. 

svg {
  width: 350px;
  text-align: center;
  display: block;
  margin: 1em auto;
  border: 1px solid;
  overflow: visible;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-21 -7 257 160"><defs><style>.cls-1{fill:black;}</style></defs>
   <g id="Logo">
       <path id="Tag_R" class="cls-1" d="M160.91,48.19h0a5.18,5.18,0,0,0,1.69,3.9l40.5,38.6L162.62,129a5.14,5.14,0,0,0-1.71,3.92v.72c0,4.1,4.12,6.38,6.91,3.82l46.5-42.73a5.18,5.18,0,0,0,0-7.64l-46.5-42.72C165,41.81,160.91,44.09,160.91,48.19Z" transform="translate(0,0)">
       <animateTransform 
    	  attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="0,0; 20,0; 0,0" 
        begin="0s"
        dur="2s" 
        repeatCount="indefinite" />
       </path>
       <path id="Tag_L" class="cls-1" d="M55.09,48.53h0a5.2,5.2,0,0,1-1.69,3.91L12.9,91l40.48,38.3a5.16,5.16,0,0,1,1.71,3.92V134c0,4.1-4.12,6.38-6.91,3.82L1.68,95.07a5.17,5.17,0,0,1,0-7.63l46.5-42.73C51,42.15,55.09,44.43,55.09,48.53Z" transform="translate(0,0)">
        <animateTransform 
    	  attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="0,0; -20,0; 0,0" 
        begin="0s"
        calcMode="linear" 
        dur="2s" 
        repeatCount="indefinite" />	
       </path>
     
       <g id="Brush" >
        <animateTransform 
    	  attributeType="XML" 
        attributeName="transform" 
        type="rotate"
        values="0,115,71.5; -22,115,71.5; 0,115,71.5" 
        begin="0s"
        calcMode="linear" 
        dur="2s" 
        repeatCount="indefinite" />
         <path class="cls-1" d="M115,44.12c.7,9.7,12.05,11,19.74,10.59,5.76-.32-38.44,72.41-50.48,89.72-.94,1.36-2.22.09-1.7-1.68C89.13,120.48,114.38,35.67,115,44.12Z"/>
         <path class="cls-1" d="M121.67,24.62c6.79-7.1,23.19-16,25.94-24.62,0,0,1.9,50.74-15.16,51.3C119.81,51.71,109.72,37.09,121.67,24.62Z"/>
       </g>
       <path id="Eye_R" class="cls-1" d="M147.68,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S152.42,75,147.68,75Zm0,13.6a4,4,0,1,1,3.56-4A3.79,3.79,0,0,1,147.68,88.61Z"/><path id="Eye_L" class="cls-1" d="M68.87,75c-4.74,0-8.59,4.31-8.59,9.61s3.85,9.61,8.59,9.61,8.58-4.3,8.58-9.61S73.61,75,68.87,75Zm0,13.6a4,4,0,1,1,3.56-4A3.8,3.8,0,0,1,68.87,88.61Z"/>
     
     <circle cx="115" cy="80" r="2" fill="red" />
   </g></svg>
...