| <!-- |
| Copyright 2014 Google Inc. All Rights Reserved. |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <!DOCTYPE html><meta charset="UTF-8"> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg"></svg> |
| |
| <script src="../bootstrap.js"></script> |
| <script> |
| 'use strict'; |
| |
| var startPath = 'M10,10v100l100,-50z'; |
| var endPath = 'M200,10v100h100v-100z'; |
| |
| function addPath(d, fill) { |
| var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
| if (d) |
| path.setAttribute('d', d); |
| path.setAttribute('fill', fill); |
| svg.appendChild(path); |
| return path; |
| } |
| |
| addPath(startPath, 'red'); |
| addPath(endPath, 'red'); |
| var target = addPath(startPath, 'green'); |
| target.classList.add('target'); |
| target.animate({d: endPath}, 1000); |
| </script> |