animationMotion element unsupported despite SVG 1.1 recommendation

By design Issue #12382055

Details

Author
Cody O.
Created
Jun 18, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Using animateMotion in SVG is a SVG 1.1 recommendation as per https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement. However, while Firefox, Safari, and Chrome support this element and its related sub-elements, Edge and IE11 do not.

See: https://codepen.io/quitedensepoint/pen/dRNEoy

Code:
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />

<!-- Red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">

<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
  <mpath xlink:href="#theMotionPath"/>
</animateMotion>

</circle>
</svg>

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “By design”

    • SMIL has been deprecated.

    You need to sign in to your Microsoft account to add a comment.

    Sign in