When I am adding
<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" />
to <g id="icon-border">
element disappears.
<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>
CodePudding user response:
It this more like it? I removed many of the transform/translate.
The animation on <g id="icon-border">
was fine. You just need to place the child circles in 0,0 and then transform/translate the <g>
to the center.
<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>