svg-animate

failure of `fill=“freeze”` in animation

由 孤街醉人 提交于 2019-12-10 20:19:07
问题 i have an attempt at a SMIL animation of a simple SVG figure at http://jsfiddle.net/emanuensis/NNvjA/ The idea is that every mouseover the words up or down will cause the yellow puck to shuttle in that direction stoping a short ways, determined by the mouseout event ... and await further mouseover s, from that location. Unfortunately the reality (in both FF & Chrome) is not so. The form ABA (where A is any number of ups and B a down - or vv) results in a noop for the second A. The first A

SVG SMIL animateTransform easing

由 和自甴很熟 提交于 2019-12-10 13:32:01
问题 I am trying to add a timing function to a simple SVG SMIL animation. Apparently timing/easing can be set with the keySplines attribute, however in my example it does not work: <svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24"> <rect style="fill:#000;" width="4" height="4" x="3" y="11"> <animateTransform attributeName="transform" begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze" calcMode="spline" keySplines="0.4, 0, 0.2,

SVG Scale Animation from Center Point instead of Upper-Left Corner

由 女生的网名这么多〃 提交于 2019-12-10 02:11:55
问题 How do I use animateTransform in an SVG to scale an object from the center point instead of the upper-left corner? Example: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"> <circle style="fill:blue;" cx="50" cy="50" r="45"> <animateTransform attributeName="transform" type="scale" from="0 0" to="1 1" begin="0s" dur="1s" repeatCount="indefinite" /> </circle> </svg> (Codepen: http://codepen.io/anon/pen/wKwrPg?editors

Beginning and pausing SVG animations on hover

由 牧云@^-^@ 提交于 2019-12-09 00:13:25
问题 I would like to animate the gears on the following SVG when the user hovers over it. That is, when the mouse enters, both gears begin rotating where they left off. When the mouse leaves, the gears stop in whatever position they're in. If possible I would like the animation to begin and end using an ease-in/out function. How can this be done using SVG animations? Codepen <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256 256"> <path d="M249.363 80

Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)

由 自古美人都是妖i 提交于 2019-12-08 13:50:17
问题 Can you give some information about new versions FF, that passed after version 37.0.2. I knew that most of the bugs in version 38 have been fixed in version 38.0.5. I noticed a difference in the processing speed of the attributes 'animate' and 'animateTransform' in all new versions of FF, and because of this the page becomes really slow. If remove animate tags: <rect x="-1.32" y="-0.63" width="3.64" height="1.26" fill="#FFD9D9" stroke-width="0.0" rx="0.12"> <!--this animation makes half

SVG Scale Animation from Center Point instead of Upper-Left Corner

由 拥有回忆 提交于 2019-12-05 03:08:18
How do I use animateTransform in an SVG to scale an object from the center point instead of the upper-left corner? Example: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"> <circle style="fill:blue;" cx="50" cy="50" r="45"> <animateTransform attributeName="transform" type="scale" from="0 0" to="1 1" begin="0s" dur="1s" repeatCount="indefinite" /> </circle> </svg> (Codepen: http://codepen.io/anon/pen/wKwrPg?editors=100 ) Change your scaling transform to use additive="sum" and apply an additional transform that

SVG animation delay on each repetition

由 五迷三道 提交于 2019-12-03 20:09:18
问题 I'd like to add a delay to each iteration of an SVG animation loop. Here's a simple example. <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> <circle cx="50" cy="50" r="15" fill="blue"> <animate id="op" attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" /> </circle> </svg> Using begin only delays the first iteration, so is there a way to delay every iteration? 回答1: You can add the end event of a SMIL animated element to the begin

react js - use svg linear gradient not working

由 落花浮王杯 提交于 2019-12-03 16:39:12
i have a circle and a grradient to fill in it, i put in the gradient and call him in path by style fill. import React,{PropTyoes} from 'react'; import {connect} from 'react-redux'; import * as Actions from '../controllers/Actions'; export default class MyComp extends React.Component { constructor(props, context){ super(props, context); } render(){ return ( <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 983.4 983.4"> <g> <linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="1041.6901" y1="169.485" x2="1383.9301" y2="169.485"

Using SVG to animate and flip a hexagon

由 ﹥＞﹥吖頭↗ 提交于 2019-12-02 12:53:04
问题 I have never really used SVGs but reading some tutorials about it now and tested some stuff. I am learning how to make shapes like a hexagon but now need to make it flip down on the vertical axis and expanding in size while keeping the bottom of the non flipped hexagon as the top of the new flipped hexagon. My code is here: <html> <style> #test:hover { fill: yellow; } </style> <body> <div class="viewBox"> <h1>SVG Testing</h1> <svg height="900" width="400" version="1.1" xmlns="http://www.w3

SVG animation on path like the snail

由 不打扰是莪最后的温柔 提交于 2019-12-02 07:34:39
问题 I have the following SVG and I would like to draw the circles pixel by pixel on the path after moveing. It's like when the snail goes he let a streak behind him. So my question is how to draw the light red circles? <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 200" id="svgBox" style="background-color:#e4e4e4"> <path d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777
订阅 svg-animate