Revised SVG example file for animateMotion and math file.

This commit is contained in:
dsward2
2017-02-23 06:06:10 -06:00
committed by dsward2
parent 3077e4ba44
commit dedf397e57
2 changed files with 2 additions and 2 deletions
+1 -1
View File
@@ -105,7 +105,7 @@
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>0091</string>
<string>0095</string>
<key>LSApplicationCategoryType</key>
<string>public.app-category.graphics-design</string>
<key>LSMinimumSystemVersion</key>
@@ -1,3 +1,3 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="480px" height="360px" viewBox="0 0 480 360" preserveAspectRatio="none" id="svg_document" style="zoom: 1;" xml:base="http://www.w3.org/Graphics/SVG/Test/20110816/svg/"><title id="svg_document_title">animateMotion on path element with auto-rotate and keySplines</title><desc id="desc1">This example demonstrates using the animateMotion element with a path element, specified by an mpath element, with attributes for auto-rotate, keyTimes and keySplines.</desc><defs id="svg_document_defs"></defs><g id="main_group"><rect id="background_rect" fill="white" x="0px" y="0px" width="640px" height="744px"></rect><text stroke="none" id="text1" style="outline-style:none;" stroke-width="1px" x="243px" font-family="Helvetica" y="79px" fill="#000000" font-size="32px" transform="" text-anchor="middle">animateMotion and mpath</text><foreignObject y="250" id="foreignObject1" width="300" height="100" x="100"><body xmlns="http://www.w3.org/1999/xhtml"><p>This example demonstrates using the animateMotion element with a path element, specified by an mpath element, with attributes for auto-rotate, keyTimes and keySplines.</p></body></foreignObject><path stroke="darkorange" id="path1" stroke-width="3px" d="M232,174 C289,175 372,114 372,154 C372,194 299,199 232,199 C165,199 106,181 105,147 C104,113 174,173 232,174" fill="none" transform=""></path><ellipse stroke="#000000" transform="" id="ellipse1" cy="0px" stroke-width="3px" fill="#ffffff" rx="20px" cx="0px" ry="8px"><animateMotion begin="0s" dur="3s" repeatCount="indefinite" calcMode="spline" additive="replace" accumulate="none" id="animateMotion1" rotate="auto" keyTimes="0;1;" keySplines="0.5 0 0.5 1"><mpath xlink:href="#path1"></mpath></animateMotion></ellipse></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="480px" height="360px" viewBox="0 0 480 360" preserveAspectRatio="none" id="svg_document" style="zoom: 1;" xml:base="http://www.w3.org/Graphics/SVG/Test/20110816/svg/"><title id="svg_document_title">animateMotion on path element with auto-rotate and keySplines</title><desc id="desc1">This example demonstrates using the animateMotion element with a path element, specified by an mpath element, with attributes for auto-rotate, keyTimes and keySplines.</desc><defs id="svg_document_defs"><linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%"><stop id="stop1" offset="0%" stop-color="white"></stop><stop id="stop2" offset="100%" stop-color="black"></stop></linearGradient></defs><g id="main_group"><rect id="background_rect" fill="white" x="0px" y="0px" width="640px" height="744px"></rect><text stroke="none" id="text1" style="outline-style:none;" stroke-width="1px" x="243px" font-family="Helvetica" y="79px" fill="#000000" font-size="32px" transform="" text-anchor="middle">animateMotion and mpath</text><foreignObject y="250" id="foreignObject1" width="300" height="100" x="100"><body xmlns="http://www.w3.org/1999/xhtml" style="background:white;"><p>This example demonstrates using the animateMotion element with a path element, specified by an mpath element, with attributes for auto-rotate, keyTimes and keySplines.</p></body></foreignObject><path stroke="darkorange" id="path1" stroke-width="3px" d="M232,174 C289,175 372,114 372,154 C372,194 299,199 232,199 C165,199 106,181 105,147 C104,113 174,173 232,174" fill="none" transform=""></path><ellipse stroke="#000000" transform="" id="ellipse1" cy="0px" stroke-width="3px" fill="url(#linearGradient1)" rx="20px" cx="0px" ry="8px"><animateMotion begin="0s" dur="3s" repeatCount="indefinite" calcMode="spline" additive="replace" accumulate="none" id="animateMotion1" rotate="auto" keyTimes="0;1;" keySplines="0.5 0 0.5 1"><mpath xlink:href="#path1"></mpath></animateMotion></ellipse></g></svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB