svg-animate | 易学教程

SVG radial-wipe animation using CSS3/JS

阅读更多关于 SVG radial-wipe animation using CSS3/JS

问题 How can i achieve a radial wipe animation in CSS3 or JS? It's seems so simple but I can't figure it out. 回答1: Here's a basic way of doing it using jQuery. There may be plug-ins available that would simplify this. JSFiddle Demo HTML <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">  <path d="M100,100 v-100 a100,100 0 0,1 0,0 z" id="circle-wipe" fill="#999" stroke-width="0" /> </svg> CSS svg { width: 200px; height: 200px; }

SVG rotate image fill on hover

阅读更多关于 SVG rotate image fill on hover

问题 I have a svg mask that rotate clockwise on hover with a picture fill inside. I would like the picture to rotate counter-clock wise to compensate the rotation of the shape on hover. My issue is that the picture goes out of the shape instead when hover. I tried to have an overflow:hidden but it doesn't work. Here is my jsfiddle : http://jsfiddle.net/nyb5wffv/1/ #hex { overflow:hidden; } svg { padding: 50px; width: 200px; height: 200px; transition: all 0.25s; } svg a { -ms-transform: rotate(0deg

SVG .end event not working?

阅读更多关于 SVG .end event not working?

问题 I'm trying to learn and play with some basic SVG animations. I was going through a tutorial/guide on CSS-Tricks, and noticed that the .end event doesn't work in Chrome and Safari. What gives? Is this not supported or a bug?? Seems silly for a simple thing like. Or maybe it's a bug with Codepen? Example Codepen - http://codepen.io/jaminroe/pen/xGQvEE/?editors=110 Thanks 回答1: It's not a good idea to use - in an id if you're going to use it with animate as it's assumed that you're starting a

Why does the SVG animation stop when using xlink:href for external file

阅读更多关于 Why does the SVG animation stop when using xlink:href for external file

问题 For some reason my spinner.svg is not animating when using xlink:href . Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows. The problem: static (and solid!) spinner instead of animation Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying. EDIT: Could this have to do with the shadow dom and xref? According to Sara Soueidan "The target element must be part of the

svg animate marker-end/marker-start with curved path animation

阅读更多关于 svg animate marker-end/marker-start with curved path animation

问题 i have curved paths that animate using the animate element. it does animate the path in combination with @keyframes , but when i add markers inside the curved path, the markers do not animate. i tested one using a simple path by changing the path values attribute. it worked perfectly using a simple path but how do i get the marker elements animate with the curved path? codepen demo: https://codepen.io/tfss/pen/yZoBLo using simple and curved paths 回答1: Since what you have is a Bézier curve,

SVG animation start position

阅读更多关于 SVG animation start position

问题 i have a small SVG animation that i have been playing around with and i was wondering if there is a simple solution for the following issue. Is there a way of changing the start point of where the circle starts? As it always seems to start on the right hand 3 o'clock position and goes around clockwise. Ideally i want it to start where and when the line finishes animating. Example: http://jsfiddle.net/matta70/7jvd6fsx/1/ .line { stroke-dasharray: 650; stroke-dashoffset: 650; animation: offset

Attribute data-ls not allowed on element svg at this point. how to rectify it

阅读更多关于 Attribute data-ls not allowed on element svg at this point. how to rectify it

问题 While checking my site with w3cvalidator it shows the this error Attribute data-ls not allowed on svg element at this point and End tag svg did not match the name of the current open element (use). here is a sample code i used. <svg class="ls-l" style="top:320px;left:30%;white-space: nowrap;" data-ls="offsetxin:-15; offsetyin:10; delayin:6854; offsetxout:-15; offsetyout:10; durationout:500; showuntil:1000; easingout:easeInOutQuart; scalexin:0; scaleyin:0; scalexout:0; scaleyout:0;" width="50"

SVG Filter tag on hover

阅读更多关于 SVG Filter tag on hover

问题 I am trying to animate an SVG which I managed to do via this filter: <defs> <filter id="green-fill" x="0%" y="0%"> <feFlood flood-color="#fff"/> <feOffset dx="85"> <animate attributeName="dx" from="0" to="85" dur="5s"/> </feOffset> <feComposite operator="in" in2="SourceGraphic"/> <feComposite operator="over" in2="SourceGraphic"/> </filter> </defs> my real problem comes when I am trying to trigger the animation on hover state, it seems that the animation is taking place when the page is load.

Chrome SVG animate tag

阅读更多关于 Chrome SVG animate tag

问题 Someone can tell me why this code : <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"> <defs id="defs"> <animate xlink:href="#poly_t1" attributeName="points" attributeType="XML" from="100,500 150,500 170,480 120,480" to="100,400 150,400 170,380 120,380" begin="0s" dur="3s" fill="freeze" ></animate> <animate xlink:href="#poly_t2" attributeName="points" attributeType="XML" from="100,500 150,500 150,500 100,500" to="100,500 150,500 150,400 100,400"

SVG pattern animation

阅读更多关于 SVG pattern animation

问题 I have defined a pattern in svg. I want to rotate it continuously.... I'm not able to apply animation on that pattern definition. i applied same animation to a symbol , it works but its not working on pattern... <pattern id="GPattern" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(35)" > <circle id="mycircle" cx="10" cy="10" r="10" style="stroke: none; fill: red" > </circle> </pattern> this is pattern def. Please help me how i can apply certain