mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-08 16:27:31 +09:00
169 lines
23 KiB
XML
169 lines
23 KiB
XML
|
<svg version="1.1" baseProfile="tiny" id="svg-root"
|
||
|
|
width="100%" height="100%" viewBox="0 0 480 360"
|
||
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
|
|
<!--======================================================================-->
|
||
|
|
<!--= SVG 1.1 2nd Edition Test Case =-->
|
||
|
|
<!--======================================================================-->
|
||
|
|
<!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =-->
|
||
|
|
<!--= Institute of Technology, European Research Consortium for =-->
|
||
|
|
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
|
||
|
|
<!--= All Rights Reserved. =-->
|
||
|
|
<!--= See http://www.w3.org/Consortium/Legal/. =-->
|
||
|
|
<!--======================================================================-->
|
||
|
|
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
|
||
|
|
template-version="1.4" reviewer="VH" author="OA" status="accepted"
|
||
|
|
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-30-t.svg,v $">
|
||
|
|
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
|
||
|
|
<p>
|
||
|
|
The purpose of this test is to test animated <use> where
|
||
|
|
the referenced <defs> also is animated.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
The test shows 6 different elements, each element defined in a
|
||
|
|
<defs> and referenced with a <use>. All the elements are
|
||
|
|
animated between 0-3 seconds. The expected animation transform is
|
||
|
|
indicated with a gray silhouette showing the border values (0 and 3 seconds)
|
||
|
|
and an arrow indicating the movement in between.
|
||
|
|
For the two elements with a color animation, the colors goes from white to
|
||
|
|
blue (the same blue color used for all elements).
|
||
|
|
</p>
|
||
|
|
</d:testDescription>
|
||
|
|
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<p>Run the test. No interaction required.</p>
|
||
|
|
</d:operatorScript>
|
||
|
|
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<p>The test passes if:</p>
|
||
|
|
<ul>
|
||
|
|
<li>Each animated element (the line, circle, three-segment polyline, image
|
||
|
|
and the two rectangles) is transformed with a continuous animation
|
||
|
|
over three seconds. The size and shape of each element must start off
|
||
|
|
as shown by the silhouette at the start of the arrow, and must end
|
||
|
|
up as shown by the silhouette at the end of the arrow.</li>
|
||
|
|
<li>The fill of the two rectangles is animated over three seconds from
|
||
|
|
white to blue.</li>
|
||
|
|
</ul>
|
||
|
|
</d:passCriteria>
|
||
|
|
</d:SVGTestCase>
|
||
|
|
<title id="test-title">$RCSfile: animate-elem-30-t.svg,v $</title>
|
||
|
|
<defs>
|
||
|
|
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
|
||
|
|
<font-face-src>
|
||
|
|
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
|
||
|
|
</font-face-src>
|
||
|
|
</font-face>
|
||
|
|
</defs>
|
||
|
|
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
|
||
|
|
<g transform=" translate(20 0) scale(1.3 1.3)">
|
||
|
|
<!-- SILHOUETTES-->
|
||
|
|
<path d="M210 40 C210 40 210 100 170 190" fill="none" stroke="#b4b4b4"/>
|
||
|
|
<path d="M 171 188 l 10 -10 l -10 -4 z" fill="#b4b4b4" stroke="none"/>
|
||
|
|
<polyline fill="none" stroke="#b4b4b4" stroke-width="2" points="200,20 200,40 220,40 220,60"/>
|
||
|
|
<polyline transform="rotate(15)" fill="none" stroke="#b4b4b4" stroke-width="9" points="200,120 200,140 220,140 220,160"/>
|
||
|
|
|
||
|
|
<line x1="40" y1="50" x2="20" y2="10" stroke="#b4b4b4" stroke-width="3"/>
|
||
|
|
<line x1="160" y1="50" x2="80" y2="10" stroke="#b4b4b4" stroke-width="3"/>
|
||
|
|
<line x1="30" y1="30" x2="120" y2="30" stroke="#b4b4b4"/>
|
||
|
|
<path d="M 120 30 l -10 3 l 0 -6 z" fill="#b4b4b4" stroke="none"/>
|
||
|
|
|
||
|
|
<line x1="70" y1="70" x2="145" y2="70" stroke="#b4b4b4"/>
|
||
|
|
<rect x="10" y="60" width="60" height="20" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
|
||
|
|
<rect x="145" y="60" width="30" height="40" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
|
||
|
|
<path d="M 145 70 l -10 3 l 0 -6 z" fill="#b4b4b4" stroke="none"/>
|
||
|
|
|
||
|
|
<circle cx="30" cy="100" r="10" fill="#b4b4b4" stroke="#b4b4b4"/>
|
||
|
|
<circle cx="100" cy="195" r="15" fill="#b4b4b4" stroke="#b4b4b4"/>
|
||
|
|
<line x1="37" y1="107" x2="89" y2="184" stroke="#b4b4b4"/>
|
||
|
|
<path d="M 90 185 l -3 -12 l -6 5 z" fill="#b4b4b4" stroke="none"/>
|
||
|
|
|
||
|
|
<rect x="300" y="10" width="20" height="20" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
|
||
|
|
<rect x="300" y="170" width="20" height="40" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
|
||
|
|
<line x1="310" y1="30" x2="310" y2="170" stroke="#b4b4b4"/>
|
||
|
|
<path d="M 310 170 l -3 -10 l 6 0 z" fill="#b4b4b4" stroke="none"/>
|
||
|
|
|
||
|
|
<rect x="230" y="7.5" width="40" height="7.5" fill="#b4b4b4" stroke="none"/>
|
||
|
|
<rect x="230" y="170" width="40" height="30" fill="#b4b4b4" stroke="none"/>
|
||
|
|
<line x1="250" y1="10" x2="250" y2="170" stroke="#b4b4b4"/>
|
||
|
|
<path d="M 250 170 l -3 -10 l 6 0 z" fill="#b4b4b4" stroke="none"/>
|
||
|
|
<!-- END OF SILHOUETTES-->
|
||
|
|
|
||
|
|
<!-- DEFS-->
|
||
|
|
<defs>
|
||
|
|
<line id="lineID" x1="30" y1="50" x2="10" y2="10" stroke="rgb(16, 93, 140)" stroke-width="3">
|
||
|
|
<animate attributeName="x1" from="30" to="90" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</line>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<rect id="rectID" x="10" y="60" width="60" height="20" fill="blue" stroke="black" stroke-width="2">
|
||
|
|
<animateColor attributeName="fill" from="white" to="rgb(16, 93, 140)" begin="0" dur="3" fill="freeze"/>
|
||
|
|
<animate attributeName="height" from="20" to="40" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</rect>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<circle id="circleID" cx="20" cy="100" r="10" fill="rgb(16, 93, 140)" stroke="black">
|
||
|
|
<animate attributeName="cy" from="100" to="130" begin="0" dur="3" fill="freeze"/>
|
||
|
|
<animateTransform attributeName="transform" type="scale" from="1" to="1.5" additive="sum" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</circle>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<polyline id="polylineID" fill="none" stroke="rgb(16, 93, 140)" stroke-width="2" points="200,20 200,40 220,40 220,60">
|
||
|
|
<animateMotion path="M 0 0 l 0 100" begin="0" dur="3" fill="freeze"/>
|
||
|
|
<animate attributeName="stroke-width" from="2" to="9" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</polyline>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<polygon id="polygonID" fill="green" stroke="black" points="240,20 240,40 260,40 260,20" stroke-width="2">
|
||
|
|
<animate attributeName="fill" from="white" to="rgb(16, 93, 140)" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</polygon>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<image id="imageID" x="230" y="20" width="40" height="80" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4RX+RXhpZgAASUkqAAgAAAAJAA8BAgAGAAAAegAAABABAgAXAAAAgAAAABIBAwABAAAAAQAAABoBBQABAAAAoAAAABsBBQABAAAAqAAAACgBAwABAAAAAgAAADIBAgAUAAAAsAAAABMCAwABAAAAAQAAAGmHBAABAAAAxAAAAGYFAABDYW5vbgBDYW5vbiBESUdJVEFMIElYVVMgMzAwAAAAAAAAAAAAALQAAAABAAAAtAAAAAEAAAAyMDAyOjAxOjE1IDA0OjQyOjU4ABsAmoIFAAEAAABWAwAAnYIFAAEAAABeAwAAAJAHAAQAAAAwMjEwA5ACABQAAAAOAgAABJACABQAAAAiAgAAAZEHAAQAAAABAgMAApEFAAEAAAA+AwAAAZIKAAEAAABGAwAAApIFAAEAAABOAwAABJIKAAEAAABmAwAABZIFAAEAAABuAwAABpIFAAEAAAB2AwAAB5IDAAEAAAAFAAAACZIDAAEAAAAAAAAACpIFAAEAAAB+AwAAfJIHAJoBAACGAwAAhpIHAAgBAAA2AgAAAKAHAAQAAAAwMTAwAaADAAEAAAABAAAAAqADAAEAAABABgAAA6ADAAEAAACwBAAABaAEAAEAAAAwBQAADqIFAAEAAAAgBQAAD6IFAAEAAAAoBQAAEKIDAAEAAAACAAAAF6IDAAEAAAACAAAAAKMHAAEAAAADAAAAAAAAADIwMDI6MDE6MTUgMDQ6NDI6NTgAMjAwMjowMToxNSAwNDo0Mjo1OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAQAAAPUAAAAgAAAA1QAAACAAAAABAAAAyAAAAGQAAAAKAAAAAAAAAAMAAACs3QIAAAABAP//AADoAwAAMAEAACAAAAAMAAEAAwAmAAAAHAQAAAIAAwAEAAAAaAQAAAMAAwAEAAAAcAQAAAQAAwAaAAAAeAQAAAAAAwAGAAAArAQAAAAAAwAEAAAAuAQAAAYAAgAgAAAAwAQAAAcAAgAYAAAA4AQAAAgABAABAAAAcVYQAAkAAgAgAAAA+AQAABAABAABAAAAAAAEAQ0AAwAEAAAAGAUAAAAAAABMAAIAAAADAAEAAAAAAAQAAAABAAAAAAAAAAAAAAAAAAAAAwABAAEwAAD/////BgKtACAAdADVAP//AAAAAAAAAAAAAP//AABABkAGAgAwAdMAngAAAAAAAAAAADQAAACPAD8B1QD1AAAAAAAAAAEAAwAAAAAAAAAHMAAAAAAAAAAA//8AANUA+QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElNRzpESUdJVEFMIElYVVMgMzAwIEpQRUcAAAAAAAAARmlybXdhcmUgVmVyc2lvbiAxLjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAPQA9AD0AABqGADOAAAAgE8SAJsAAAAEAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAEQAwABAAAAQAYAAAIQAwABAAAAsAQAAAAAAAAGAAMBAwABAAAABgAAABoBBQABAAAAtAUAABsBBQABAAAAvAUAACgBAwABAAAAAgAAAAECBAABAAAA9AUAAAICBAABAAAA7g8AAAAAAAC0AAAAAQAAALQAAAABAAAA//////////////////////////////////////////////////9//////////////9j/2wCEAAkGBggGBQkIBwgKCQkLDRYPDQwMDRwTFRAWIR0jIiEcIB8kKTQsJCcxJx4fLT0tMTY3Ojo6Iio/RD44QjM3OTYBCQkJDAoMFAwMFA8KCgoPGhoKChoaTxoaGhoaT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAHgAoAMBIQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AOxApcV7J5goUngDNIVweaBC80oYjvRYLseszAY60FjI3c1HLZ3L5r6DjG46jFRFjTVmJtoA5qW3j3vuIBAokuVNgnzOxpKVA5xUNyY3TB4Fc0b3Oh2sZbqAxx0pMV2pnG9xNtJincA20hWmBMBT1XJrJuxaLf7pU4wKqScuayp3vqaTtbQABjmnRJunQdiRVtuz8kQlsa0kUUg+ZFP4VVeyUNuiJB9DXn060oabx6o7Z0oy12l3I5pMDawwcVTIrupbX6PY46u9uq3ExT0kZBxWrV9DNOw4zue9MZi3U0lFIbm2NwKTFUIMUmKYgxSYoAmAFP2+9Z3NLCbaTbzRcmw9baR13KpIp8ETLcpuUjnvWcqsbNXXMk9DSNOV07aX3NInFNPTmvLO8iljWVcN19az2hZZNmMkniuzC1LXg9t0c2Ihe0lv1JZrGWEZIBX1FV8V1U6iqK6+aOacHB2fyYYorQkMUmKYgxSYoEGKTFAyYCnYrM0FCM33VJ+go8mQfwN+VS5xWjaTDlk9kzSRBHGq+gpoO6ZB6mvLk7tvuz0ErK3YlkIQVAz0hkZamhlWRXIztNCdtVuDV9zRDBlBGCCKz7uyO8NCuQeoHatqFTkld/C9zOrDnj5rYYunSn7xVfqaf/Zn/TTn/drpli4p6Lm89jnjhn1dvIo3TRWt5HbGQNNICwUdQB3NGK3pVPaR5tvIyqQ5HbfzDFJitDMMUYoAlxSgVmaGlAAkCjvjNKeTXlzd5N92ehFWSXZCHmoyQjBj2qGUMkn3GojJQA0yUKGf7ozQBbtd6x4fgZ4qxmhMGGcCsjxP4ktvDGiS39yQSPljjzy79hTEcN8P7y51mbUNd1KQGSZxGrHgDP8ACPyFdtivRw1vZ6dHqcNe/P6rQcIXPRGP4UxsLJ5bEB8Z298etbc8b2ur9jLkklezt3DFGKsRLQKzLNFJULiPeofGduecfSiR/wB4qD6mvIb/ADPSQuPWqt+3lxKfVgKT2AqmSk3E9KALUFkW+aTgelWtqhhGgx647Cj+kBI/3Pl7UwOCMijqBICGXNcj448Ax+MfLkN/NbyQqRGmA0fPcj+tMCPwz8PRpWnWcN/ePKYG83yovljL+p7nH4V1sjQWcLSyFIo0GW
|
||
|
|
<animate attributeName="y" from="5" to="145" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</image>
|
||
|
|
</defs>
|
||
|
|
<!-- END OF DEFS-->
|
||
|
|
|
||
|
|
<!-- ACTUAL TEST CONTENT-->
|
||
|
|
<use xlink:href="#lineID">
|
||
|
|
<animate attributeName="x" from="10" to="70" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
|
||
|
|
<use xlink:href="#rectID">
|
||
|
|
<animateTransform attributeName="transform" type="translate" from="0 0" to="140 0" begin="0" dur="3" fill="freeze"/>
|
||
|
|
<animateTransform attributeName="transform" type="scale" from="1 1" to="0.5 1" begin="0" dur="3" additive="sum" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
|
||
|
|
<use xlink:href="#circleID">
|
||
|
|
<animate attributeName="x" from="10" to="70" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
|
||
|
|
<use xlink:href="#polylineID">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="15" additive="sum" begin="0" dur="3" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
|
||
|
|
<use x="60" y="-10" xlink:href="#polygonID">
|
||
|
|
<animateMotion path="M 0 0 l 0 150" begin="0" dur="3" fill="freeze"/>
|
||
|
|
<animateTransform attributeName="transform" type="scale" from="1 1" to="1 2" begin="0" dur="3" additive="sum" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
|
||
|
|
<use xlink:href="#imageID">
|
||
|
|
<animateTransform attributeName="transform" type="scale" from="1 .25" to="1 1" begin="0" dur="3" additive="sum" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
<!-- END OF ACTUAL TEST CONTENT-->
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
|
||
|
|
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</text>
|
||
|
|
</g>
|
||
|
|
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
|
||
|
|
<!-- comment out this watermark once the test is approved -->
|
||
|
|
<!--<g id="draft-watermark">
|
||
|
|
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
|
||
|
|
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
|
||
|
|
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
|
||
|
|
</g>-->
|
||
|
|
</svg>
|