svg mouseover doesn't work in zurb foundation nav topbar - svg
I'm working with zurb foudation and have a roll over on an svg that is within the header. If the svg is under
then the roll over effect on the svg doesn't work. but if I remove either the section tag or the data-topbar attribute then it works fine. you can see an example of all three variations here:
http://firefields.com/foundation-5.5.0/icon-issue.html
and this is the svg code
<svg version="1.1" id="headTest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve" >
<defs>
<mask id="Mask">
<path fill="#ffffff" d="M25.4,12.7L15.3,28.6c0.2,0.2,0.4,0.4,0.6,0.5c0.4,0.2,0.7,0.4,1.2,0.5L27,13.9c-0.3-0.4-0.6-0.7-0.8-0.8
C25.9,12.9,25.7,12.8,25.4,12.7z"/>
<path fill="#ffffff" d="M14.3,25.9c0.3-0.2,0.6-0.3,0.8-0.4l1.5-2.3c-1,0.1-2.1,0.4-3.3,0.9c-2.1,1.1-4.2,3-5.8,5.4
c-0.5,0.7-0.8,1.4-1.1,2.1c0.5,0.7,0.9,1.2,1.5,1.8c0.4-0.9,0.8-1.9,1.4-2.8C10.6,28.5,12.4,26.8,14.3,25.9z"/>
<path fill="#ffffff" d="M20.3,37.6c1.6-2.5,2.5-5.3,2.5-7.8c0-1.7-0.4-3.2-1-4.3l-1.2,2.1c0.2,0.7,0.4,1.4,0.3,2.2
c0,2.1-0.8,4.6-2.2,6.7c-0.5,0.7-1,1.4-1.5,2c-2.8-0.7-5.3-1.9-7.6-3.6C9.2,35.6,9.1,36.3,9,37c2.6,2,5.6,3.2,8.8,3.7
c0.6-0.6,1.1-1.1,1.6-1.8l0,0c0,0,0,0,0.1,0C19.7,38.5,20,38.1,20.3,37.6z"/>
<path fill="#ffffff" d="M38.7,12c-0.8-1.7-2-3.3-3.3-4.6c-0.1,0.7-0.4,1.5-0.7,2.2c0,0,0,0.1,0.1,0.1l-0.1-0.1c-0.4,1-0.8,2-1.5,3
c-1.4,2.1-3.2,3.8-5,4.8c-0.7,0.3-1.3,0.6-1.9,0.7l-1.2,2.1c1.3,0.1,2.7-0.3,4.1-0.9c2.1-1.1,4.2-3.1,5.8-5.5
c0.5-0.7,0.8-1.4,1.1-2.1c0.3,0.5,0.6,0.8,0.7,1.3c4.5,8.9,0.9,19.7-7.9,24.2c-2.4,1.2-4.9,1.9-7.5,1.9c-0.5,0.7-0.9,1.4-1.5,2
c3.3,0.2,6.7-0.6,9.9-2.1C39.9,33.9,43.8,21.8,38.7,12z"/>
<path fill="#ffffff" d="M12.9,5c2.9-1.5,6-2.1,9.1-1.9c0.6-0.7,1.1-1.3,1.7-1.9c-3.8-0.5-7.8,0.1-11.6,2c-9.9,4.9-13.9,17-8.9,26.8
c1,2.1,2.4,3.9,4.1,5.5c0.1-0.7,0.4-1.5,0.7-2.1c-1.1-1.2-2.1-2.6-3-4.2C0.5,20.3,4,9.5,12.9,5z"/>
<path fill="#ffffff" d="M22.4,5.6c-1.6,2.5-2.5,5.3-2.5,7.8c0,1.4,0.2,2.6,0.7,3.5l1.4-2.2c-0.1-0.4-0.1-0.8-0.1-1.3
c0-2.1,0.8-4.6,2.2-6.7c0.7-1.1,1.4-2.1,2.1-2.8c2.6,0.8,5,2.1,7.1,4.1c0.3-0.8,0.5-1.6,0.5-2.2c-2.3-2-5-3.3-7.9-4
c-0.7,0.5-1.2,1-1.8,1.7c0.3,0.1,0.2,0-0.1,0C23.4,4,22.9,4.8,22.4,5.6z"/>
</mask>
</defs>
<g mask="url(#Mask)">
<circle fill="#222222" class="icon-background-circle" cx="21" cy="21" r="21"/>
<circle fill="#73e8eb" class="icon-foreground-circle" cx="21" cy="21" r="0">
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseover" to="21" dur="0.15s" fill="freeze" />
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseout" to="0" dur="0.15s" fill="freeze" />
</circle>
</g>
<rect id="hoverZone" x="0" y="0" width="42" height="42" fill-opacity="0" />
</svg>
hope you can help.
It has nothing to do with the <section> element.
When an an SVG is embedded via the <img> element, animations are allowed, but interaction (such as mouse events) are not. This is for privacy reasons.
Use <object> or <embed> instead.
Related
animateTransform a group/object on hover (and return to initial state afterwards)
Is it possible to perform an animateTransform on a hover inside SVG? I want the element to transform while the mouse is over it, and then return to its original position when the mouse has left. I figure this is probably isn't possible. I have a mouseover to start the element, a mouseout to stop it, and set fill to remove to set its state back to the start. But if the transform moves the object out from user the mouse cursor, the animation resets and starts moving again then moves out and resets and starts moving again ... flickering. Here my simple example <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <g transform="translate(0 0)"> <rect x="10" y="10" width="20" height="40" fill="black" /> <animateTransform attributeName="transform" begin="mouseover" end="mouseout" dur="2s" type="translate" from="0 0" to="50 50" repeatCount="1" fill="remove" /> </g> </svg> Note: The svg is not being used on a HTML page - most solutions I have seen use "css" and "javascript", neither of which are available. I need to use SVG/SMIL only. If I were targetting html, I'd use css :hover.
You can use fill freeze on combination with restart whenNotActive. And then have an animation for both mouseover and mouseout. I also removed the from attribute. The animation needs to start from the "freezed" point. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <g transform="translate(0 0)"> <rect x="10" y="10" width="20" height="40" fill="black" /> <animateTransform attributeName="transform" begin="mouseover" dur="2s" type="translate" to="50 50" repeatCount="none" fill="freeze" restart="whenNotActive" /> <animateTransform attributeName="transform" begin="mouseout" dur="2s" type="translate" to="0 0" repeatCount="none" fill="freeze" restart="whenNotActive" /> </g> </svg>
One variant is to link the animation to an invisible, unmoving element on top of the moving one. For that, the begin and end event values are prefixed with the id of that cover element. Like this: <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <g transform="translate(0 0)"> <rect x="10" y="10" width="20" height="40" fill="black" /> <animateTransform attributeName="transform" begin="cover.mouseover" end="cover.mouseout" dur="2s" type="translate" from="0 0" to="50 50" repeatCount="1" fill="remove" /> </g> <rect id="cover" x="10" y="10" width="20" height="40" opacity="0" /> </svg>
svg changes when converted to symbol
I have this dummy svg showing a cirle with some grey figure inside <svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <circle id="path-1" cx="43" cy="43" r="43"></circle> </defs> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-585.000000, -391.000000)"> <g transform="translate(585.000000, 391.000000)"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <use id="Oval" fill="currentcolor" xlink:href="#path-1"></use> <g id="Group" mask="url(#mask-2)" fill="#b8b8b8"> <g transform="translate(21.500000, 27.823529)" id="Page-1"> <path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path> </g> </g> </g> </g> </g> when I convert it to a sprite using gulp-svg-sprite with mode symbol I get this result <?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg> Now the grey figure breaks out of the circle and this even happens if I copy root defs- and g-tags from my original svg directly into the symbol-tag. I have also tried inserting a clipPath in the symbol version but with no luck. What am I missing here?
UPDATED: Simplifying your svg may work ... try with the examples below, one using symbols, one without (in case the gulp sprite code cannot have nested symbols) ... it may be an issue with the defs area.
svg {
width: 100px;
}
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="c">
<circle cx="43" cy="43" r="43" fill="currentColor" />
</symbol>
<mask id="mask" color="#fff">
<use xlink:href="#c" />
</mask>
</defs>
<use xlink:href="#c" color="#666" />
<path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask2" color="#fff">
<circle cx="43" cy="43" r="43" fill="#FFF" />
</mask>
</defs>
<circle cx="43" cy="43" r="43" fill="currentColor" />
<path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
It is probably not a complete answer but I managed to get it work; First I extended my defs with a clipPath using my circle <defs> <circle id="circle" cx="43" cy="43" r="43"></circle> <clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath> </defs> Then, using the clipPath on my first group and switching from gulp-svg-sprite to gulp-svgstore (which moves the defs to the top, above the symbols) gives me what I expect both as single svg and as an svg symbol sprite.
SVG animation not repeating properly
I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation in action. Code below https://jsfiddle.net/allanberlin/cma0ejkw/ <svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <g> <path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1 c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9 c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4 c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0 c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2 c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2 c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5 c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z"/> <animate id="Circle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="0s; Mona.end"/> </g> <g> <path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2 L42.3,67l4.1-29.3L30.8,61.2z"/> <animate id="Triangle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="2s; Circle.begin+1s"/> </g> <g> <path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8 c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0 c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8 c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0 c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4 c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3 c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3 c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2 l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0 c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8 c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7 c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0 c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3 c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5 C70.6,43.4,71.1,44.8,72.3,45.3z"/> <animate id="Mona" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="3s; Triangle.begin+1s"/> </g> </svg>
visible has two i's and no a.
Do you really want everything to appear at once. If not make the groups hidden by default as I've done.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g visibility="hidden">
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" />
<animate id="Circle" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="0s; Mona.end"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z"/>
<animate id="Triangle" from="hidden" to="visible" dur="1s" attributeName="visibility" begin="Circle.begin+1s"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z"/>
<animate id="Mona" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="Triangle.begin+1s"/>
</g>
</svg>
Here's another way to do it, but without the flashing.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" visibility="hidden">
<set id="Circle" attributeName="visibility" attributeType="CSS" to="visible"
begin="0s; Mona.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Circle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z" visibility="hidden">
<set id="Triangle" attributeName="visibility" attributeType="CSS" to="visible"
begin="Circle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Triangle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z" visibility="hidden">
<set id="Mona" attributeName="visibility" attributeType="CSS" to="visible"
begin="Triangle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Mona.end" fill="freeze"/>
</path>
</g>
</svg>
XML SVG - persist the end state of an animation
After the end of an AnimateTransform action, the element snaps back to the original value. This isn't exactly unexpected as it's in the SMIL documentation: As with all animation elements, this only manipulates the presentation value, and when the animation completes, the effect is no longer applied But it is unwanted. I'd like to find a way to persist the changes using XML animations Here's an example in SVG <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect id="outline" stroke="black" fill="white" width="100" height="100" > <animateTransform id="one" attributeType="XML" attributeName="transform" type="translate" from="0" to="-7" dur="1s" repeatCount="1" /> </rect> </svg> One idea I had was to call a set action with dur="indefinite" that was triggered by the end of the first animation with begin="one.end", but can't quite seem to get the syntax right. I haven't found any documentation that show how to call set for a transformed value. <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect id="outline" stroke="black" fill="white" width="100" height="100" > <animateTransform id="one" attributeType="XML" attributeName="transform" type="translate" from="0" to="-7" dur="1s" repeatCount="1" /> <!-- Doesn't work --> <set attributeType="XML" attributeName="transform" type="translate" to="-7" begin="one.end" /> <!-- Does work (as POC) --> <set attributeType="css" attributeName="fill" to="green" begin="one.end" /> </rect> </svg> This question on persisting the end state of the animation shows how to do this with css transforms by using -webkit-animation-fill-mode: forwards;, but that obviously won't have any affect on an svg animation
fill="freeze" will persist the state of an animation e.g. <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect id="outline" stroke="black" fill="white" width="100" height="100" > <animateTransform id="one" attributeType="XML" attributeName="transform" type="translate" from="0" to="-7" dur="1s" repeatCount="1" fill="freeze"/> </rect> </svg>
How to Exclude Area inside of clippath in Svg
I want to hide anything that outside a rectangle. (this i have achieved with clipping successfully). but another condition is that, 'also hide anything that comes inside the black big circle'. Now how i can achieve that? in below example, 'yellow circle' must be eliminated'. see below images for detail Original:- Desired:- Below is my Svg code:- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <g> <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> <circle cx="180" cy="150" r="30" stroke="blue" /> </g> <g clip-path = "url(#clip1)"> <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" /> </g> <clipPath id = "clip1"> <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> </clipPath> </svg>
Erik Dahlström is right, your clip can include the entire rectangle and the cutout for the circle. This way, anything you associate with #clip1 as the clip-path will not be visible inside your circle area. Here is what it looks like for your example: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <g> <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> <circle cx="180" cy="150" r="30" stroke="blue" /> </g> <g clip-path = "url(#clip1)"> <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" /> </g> <clipPath id = "clip1"> <path d="M 50,50 l200 0 l0 200 l-200 0z M150,150 a30,30 1 0,0 60,0z M210,150 a30,30 1 0,0 -60,0z"/> </clipPath>