应用旋转动画后 SVG 元素消失

Question

当我添加时

<animateTransform attributeType="xml" attributeName="transform" 
        type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" 
        additive="sum" repeatCount="indefinite" />

至<g id="icon-border">元素消失。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 65 65">
  <defs>
    <filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
      <feOffset input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="7.5" result="blur"/>
      <feFlood flood-color="#dec652" flood-opacity="0.478"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>

    <style>

    </style>
  </defs>
  <g id="Group_470" data-name="Group 470" transform="translate(-1646.5 -154.5)">
  
    <g transform="matrix(1, 0, 0, 1, 1646.5, 154.5)" filter="url(#Ellipse_320)">
      <circle id="Ellipse_320-2" data-name="Ellipse 320" cx="10" cy="10" r="10" transform="translate(22.5 22.5)" fill="#dec652"/>
      
    </g>
    <g id="icon-border" transform="translate(1666 174)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
      <circle cx="13" cy="13" r="13" stroke="none"/>
      <circle cx="13" cy="13" r="12.5" fill="none"/>
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" />
    </g>
    <g id="text-change-accept-svgrepo-com" transform="translate(1673.811 182.551)">
      <path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
      <path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
      <path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
      <path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
      <path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
    </g>
    
  </g>
</svg>

Answer 1

这样更像吗？我删除了很多 transform/translate.

<g id="icon-border"> 上的动画很好。您只需要将子圆圈放在 0,0，然后 transform/translate <g> 到中心。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 65 65">
  <defs>
    <filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
      <feOffset input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="7.5" result="blur"/>
      <feFlood flood-color="#dec652" flood-opacity="0.478"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_470" data-name="Group 470">
    <circle id="Ellipse_320-2" data-name="Ellipse 320" filter="url(#Ellipse_320)" cx="32.5" cy="32.5" r="10" fill="#dec652"/>
    <g id="icon-border" transform="translate(32.5 32.5)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
      <circle cx="0" cy="0" r="13" stroke="none"/>
      <circle cx="0" cy="0" r="12.5"/>
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" dur="0.5s" additive="sum" repeatCount="indefinite" />
    </g>
    <g id="text-change-accept-svgrepo-com" transform="translate(27.5 28.5)">
      <path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
      <path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
      <path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
      <path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
      <path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
    </g>
  </g>
</svg>

应用旋转动画后 SVG 元素消失

SVG element disappears after apply rotate animation

html

css

svg

css-animations

svg-animate