SVG: Switching path definition of mpath during animation doesn't work
Reported by
paul.leb...@gmail.com,
Jul 10 2016
|
|||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 Example URL: https://jsfiddle.net/zmhrvbLr/ Steps to reproduce the problem: 1. Try the linked/attached SVG What is the expected behavior? Element being animated along path jumps to new path when it changes. What went wrong? Element continues along old/original path. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 51.0.2704.103 Channel: n/a OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Shockwave Flash 22.0 r0 Works in Firefox. Test case included below in case Fiddle link breaks: <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="mpath" stroke="orange" stroke-width="2" fill="none" d="M10,100 L 390,100"/> <path fill="blue" d="M0,-5 L10,0 0,5 Z"> <animateMotion dur="5s" repeatCount="indefinite" rotate="auto" keyPoints="0;1" keyTimes="0;1" calcMode="linear"> <mpath xlink:href="#mpath"/> </animateMotion> </path> </svg> var first = true; setInterval(function() { first = !first; elem = document.getElementById("mpath"); elem.setAttribute("d", first ? "M10,100 L 390,100" : "M10,100 L 390,300") }, 2500);
,
Jul 11 2016
thanks for the report. CL: https://chromium.googlesource.com/chromium/src/+log/d738ccdbf70dff7b1aef51a7b01b084e27088d58..86a3c606a0525780fffbe7fdffd4fe252f54ccd5 assigning to hiroshige@, seeing some changes to SVG related in https://chromium.googlesource.com/chromium/src/+/3065748ccfc14c45da2e151348b85d34d94bf76b hiroshige@, Could you please take a look at the issue and assign it to concerned developer if your changes are not responsible? Good Build:49.0.2592.0 Bad Build:49.0.2593.0 Able to reproduce the issue on Win7, Mac OS X 10.11.5, Ubuntu 14.04 using Chrome Stable 51.0.2704.106, Beta 52.0.2743.60, Dev 53.0.2785.8 and Canary 54.0.2794.0
,
Jul 11 2016
Moving this nonessential bug to the next milestone. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jul 18 2016
In that CL range, c0f950e6701367e996f94d379f36c2109adab8ee seems more related. I suspect we'll now pick up the old path in the synchronous update of the motion path, because of how SVGPathElement::asPath is structured. We should probably consider transitioning to a "deferred" flow (i.e "invalidateAnimationPath" rather than "updateAnimationPath") if possible. Or just always use the attribute in this case (likely simpler.)
,
Jul 18 2016
As a workaround, it's possible to do something like:
<defs style="display: none">
<path id="mpath" stroke="orange" stroke-width="2" fill="none"
d="M10,100 L 390,100"/>
</defs>
<use xlink:href="#mpath"/>
(yes, eww...)
,
Jul 20 2016
,
Aug 11 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/403a0d6c1bcfa02363f764acd1ba56145263bafa commit 403a0d6c1bcfa02363f764acd1ba56145263bafa Author: ericwilligers <ericwilligers@chromium.org> Date: Thu Aug 11 04:27:45 2016 SVG: Use path attribute for animateMotion Avoids a bug where the path attribute was updated but the style had not yet been recalculated. The SMIL animateMotion element was notified of the update but then read the now-invalid style. BUG= 626935 Review-Url: https://codereview.chromium.org/2227463002 Cr-Commit-Position: refs/heads/master@{#411264} [add] https://crrev.com/403a0d6c1bcfa02363f764acd1ba56145263bafa/third_party/WebKit/LayoutTests/svg/animations/animateMotion_changingPath-expected.html [add] https://crrev.com/403a0d6c1bcfa02363f764acd1ba56145263bafa/third_party/WebKit/LayoutTests/svg/animations/animateMotion_changingPath.html [modify] https://crrev.com/403a0d6c1bcfa02363f764acd1ba56145263bafa/third_party/WebKit/Source/core/svg/SVGAnimateMotionElement.cpp [modify] https://crrev.com/403a0d6c1bcfa02363f764acd1ba56145263bafa/third_party/WebKit/Source/core/svg/SVGPathElement.cpp [modify] https://crrev.com/403a0d6c1bcfa02363f764acd1ba56145263bafa/third_party/WebKit/Source/core/svg/SVGPathElement.h
,
Aug 11 2016
,
Aug 16 2016
Tested the same on mac 10.11 win8.1 and Linux 14.04 chrome version 54.0.2830.0 with the given fiddle - Element being animated along path jumps to new path when it changes. Please find the screencast Fix works as expected.
|
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by tkent@chromium.org
, Jul 11 2016