SVG animateTransform tag is lost when using SVG use
Question
I've defined a spinning rectangle in an SVG file using symbols. The file is called my.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100">
<defs>
<symbol id="hey">
<rect x="150" y="20" width="60" height="60" fill="blue">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 180 50" to="360 180 50" dur="4s" repeatCount="indefinite" />
</rect>
</symbol>
</defs>
</svg>
I include this using svg use in my html file.
<svg>
<use xlink:href="my.svg#hey"></use>
</svg>
What happens is, the animateTransform element is gone, and the rectangle does not spin.
I've verified this on many browsers and server types. I don't understand why it is dropped. I can literally copy-paste the animateTransform back in to the svg use element so it's not as if it is not supported - it is simply removed for some reason when called via use .
I've found out this is not the case when locally defined as per my fiddle.
How can I keep that animateTransform element when i use svg use ?
In firefox the whole thing rotates, in chrome nothing happens.
1 answers
solution1
-3 2017-10-27 21:21:44
trouble with Chrome still now???
I Updates my answer : (TY to @ccprog)
SMIL works in this moment with browsers FF & GC & Safari.. but don't work with IE&Edge
and Not currently planned .( https://caniuse.com/#feat=svg-smil )
My example below use CSS, works with Edge too
And about your code.. may be local troubles with Chrome? if don't works
Check Flag to disable SMIL support (see below)
for example on CSS:
<!DOCTYPE html> <html> <head> <title>.</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" /> <style> .loader { position: relative; top: 20px; left: 150px; height: 60px; width: 60px; background-color: #00f; -webkit-animation: spin 1200ms infinite linear; -moz-animation: spin 1200ms infinite linear; animation: spin 1200ms infinite linear; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } </style> </head> <body> <div class="loader"></div> </body> </html>
Google has decided to no longer support the markup language in its Chrome browser. Those that open an SVG graphic with SMIL animation on Chrome 45 will see a screen that says that SMIL is deprecated and that you should switch to CSS or web animations.
(Aug 18 2016 Google Removed SMIL deprecation warning)
Wed Jun 10 04:13:40 2015 UTC
https://codereview.chromium.org/1158563006
Add SMIL deprecation warning
Mon Jul 27 07:51:01 2015 UTC
https://codereview.chromium.org/1251983005
Flag to disable SMIL support
Authors can use the command line flag --disable-blink-features=smil to disable SMIL functionality.
Thu Aug 18 16:58:09 2016
https://codereview.chromium.org/2256013003
Remove SMIL deprecation warning
Monday, July 27, 2015
https://blog.chromium.org/2015/07/chrome-45-beta-new-es2015-features.html
In Chrome 45 (45.0.2454.85) there is a deprecation warning According to the warning:
SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
Test of browser for support SMIL( https://modernizr.com/download#setclasses&q=SVG+SMIL+animation )
A Guide to Alternatives
https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/
For future projects, other animation options and libraries such as SVG.js or Snap.svg or D3 or Vanilla JS can be used.
... or use ECMAScript(JS) .
SVG Animation in IE9 from Microsoft
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.