html - 无法以特定方式移动/动画我的 svg Logo

Question

这是我网站的 svg 标志。我希望每个标签都打开得更宽，同时让中心刷笔直站立。我一直在玩转翻译属性，但我一无所获。所以总结一下...

Tag_R 的

id 需要向右移动与 Tag_L 的 id 相同的距离，所以它看起来就像张开嘴一样。同时，我希望画笔(Brush 的id)指向上方直立。

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>

Answer 1

翻译后，您需要将 svg 元素的 viewBox 更改为更大的图标。为了让它正确，您可以使用 Logo.getBBox()。这将返回一个具有新 Logo 大小的对象。希望对您有所帮助。

您还需要找到画笔的中心以便能够设置旋转中心。

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>