| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- =====================================================================--> |
| <!-- animate-elem-46-t.svg --> |
| <!-- --> |
| <!-- Animation of text-anchor --> |
| <!-- --> |
| <!-- Author : Vincent Hardy. --> |
| <!-- =====================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360"> |
| <SVGTestCase xmlns:testcase="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewer="CN" owner="VH" desc="Animation of text properties: text-anchor, font-size, font-family, font-style and font-weight" status="accepted" version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-46-t.svg,v $"> |
| <OperatorScript> |
| <Paragraph> |
| This test validates the operation of the animate element on the various |
| text and font properties. This test is very similar to animate-elem-77-t.svg |
| which uses the set element instead of the animate element to modify graphics |
| properties. |
| </Paragraph> |
| |
| <Paragraph> |
| For each text or font properties, there are three tests. One animates the text or font |
| property directly on a text element which uses the |
| property. The other two tests apply the animation on a container element (g and |
| a), and validate that the animated property is inherited by children text elements. |
| </Paragraph> |
| |
| <Paragraph> |
| For each animation test, the element on which the animation is applied is also |
| translated by an animation so that the various states of the animation can |
| be checked more easily. There is a gray reference marker which shows |
| the expected animation state at the begining of the animation, mid-way, or at the |
| end of the animation. |
| </Paragraph> |
| |
| <Paragraph> |
| Only the animation of font-size should show a continuous change of the font size. |
| </Paragraph> |
| |
| <Paragraph> |
| The following animations have a discrete behavior: text-anchor, font-family, |
| font-style, font-weight. |
| </Paragraph> |
| </OperatorScript> |
| </SVGTestCase> |
| <g transform="translate(80, 80)"> |
| |
| <g transform="translate(20,10)" text-anchor="end" font-size="14"> |
| <text x="5" y="15">text-anchor</text> |
| <text x="5" y="50">font-size</text> |
| <text x="5" y="85">font-family</text> |
| <text x="5" y="120">font-style</text> |
| <text x="5" y="155">font-weight</text> |
| </g> |
| |
| <g id="type" transform="translate(90, -10)" text-anchor="middle" font-size="14"> |
| <text x="20" y="3"><text></text> |
| <text x="135" y="3"><g></text> |
| <text x="250" y="3"><a></text> |
| </g> |
| |
| <g transform="translate(80,5)" text-anchor="start" font-size="20" fill="rgb(204,0,102)"> |
| <g id="animateZero"> |
| <defs> |
| <g id="animateZeroRef" font-size="30" font-weight="bold"> |
| <text x="0" y="20" fill="#aaa" text-anchor="end">A</text> |
| <rect x="-2" y="18" width="4" height="4" fill="#aaa"/> |
| <text x="0" y="20" fill="#aaa" text-anchor="middle" transform="translate(30,0)">A</text> |
| <rect x="-2" y="18" width="4" height="4" fill="#aaa" transform="translate(30,0)"/> |
| <text x="0" y="20" fill="#aaa" text-anchor="start" transform="translate(60,0)">A</text> |
| <rect x="-2" y="18" width="4" height="4" fill="#aaa" transform="translate(60,0)"/> |
| <rect x="-2" y="18" width="4" height="4"> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" dur="3s" fill="freeze" calcMode="discrete"/> |
| </rect> |
| </g> |
| </defs> |
| |
| <use xlink:href="#animateZeroRef"/> |
| <use xlink:href="#animateZeroRef" x="110"/> |
| <use xlink:href="#animateZeroRef" x="220"/> |
| |
| <text id="textID_0" x="0" y="20" text-anchor="end" font-size="30" font-weight="bold">A</text> |
| <animate xlink:href="#textID_0" attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/> |
| <animateTransform xlink:href="#textID_0" attributeName="transform" type="translate" values="0;30;60" dur="3s" fill="freeze" calcMode="discrete"/> |
| |
| |
| <g transform="translate(110, 0)" text-anchor="end" font-size="30" font-weight="bold"> |
| <animate attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </g> |
| |
| <a transform="translate(220, 0)" text-anchor="end" font-size="30" font-weight="bold"> |
| <animate attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </a> |
| </g> |
| |
| <g id="animateOne" transform="translate(0,35)"> |
| <defs> |
| <g id="animateOneRef" font-weight="bold" text-anchor="start"> |
| <text x="0" y="20" fill="#aaa" font-size="30">A</text> |
| <text x="0" y="20" fill="#aaa" font-size="12" transform="translate(30,0)">A</text> |
| <text x="0" y="20" fill="#aaa" font-size="30" transform="translate(60,0)">A</text> |
| </g> |
| </defs> |
| |
| <use xlink:href="#animateOneRef"/> |
| <use xlink:href="#animateOneRef" x="110"/> |
| <use xlink:href="#animateOneRef" x="220"/> |
| |
| <text id="textID_1" x="0" y="20" font-size="12" font-weight="bold">A</text> |
| <animate xlink:href="#textID_1" attributeName="font-size" values="30;12;30" dur="3s" fill="freeze"/> |
| <animateTransform xlink:href="#textID_1" attributeName="transform" type="translate" from="0" to="60" dur="3s" fill="freeze"/> |
| |
| <g transform="translate(110, 0)" font-size="12" font-weight="bold"> |
| <animate attributeName="font-size" values="30;12;30" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" from="0" to="60" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </g> |
| |
| <a transform="translate(220,0)" font-size="12" font-weight="bold"> |
| <animate attributeName="font-size" values="30;12;30" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" from="0" to="60" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </a> |
| </g> |
| |
| <g id="animateTwo" transform="translate(0,70)"> |
| <defs> |
| <g id="animateTwoRef" font-weight="bold" font-size="30"> |
| <text x="0" y="20" fill="#aaa" font-family="sans-serif">A </text> |
| <text x="30" y="20" fill="#aaa" font-family="serif">A</text> |
| <text x="60" y="20" font-size="30" fill="#aaa" font-family="sans-serif">A</text> |
| </g> |
| </defs> |
| <use xlink:href="#animateTwoRef"/> |
| <use xlink:href="#animateTwoRef" x="110"/> |
| <use xlink:href="#animateTwoRef" x="220"/> |
| |
| <text id="textID_2" x="0" y="20" font-weight="bold" font-size="30">A</text> |
| <animate xlink:href="#textID_2" attributeName="font-family" values="sans-serif;serif;sans-serif" dur="3s" fill="freeze"/> |
| <animateTransform xlink:href="#textID_2" attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze"/> |
| |
| <g font-weight="bold" font-size="30" transform="translate(110,0)"> |
| <animate attributeName="font-family" values="sans-serif;serif;sans-serif" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </g> |
| |
| <a font-weight="bold" font-size="30" transform="translate(220,0)"> |
| <animate attributeName="font-family" values="sans-serif;serif;sans-serif" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </a> |
| </g> |
| |
| <g id="animateThree" transform="translate(0,105)"> |
| <defs> |
| <g id="animateThreeRef" font-size="30" font-weight="bold"> |
| <text x="0" y="20" font-size="30" fill="#aaa" font-style="normal">A</text> |
| <text x="30" y="20" font-size="30" fill="#aaa" font-style="italic">A</text> |
| <text x="60" y="20" font-size="30" fill="#aaa" font-style="normal">A</text> |
| </g> |
| </defs> |
| <use xlink:href="#animateThreeRef"/> |
| <use xlink:href="#animateThreeRef" x="110"/> |
| <use xlink:href="#animateThreeRef" x="220"/> |
| |
| <text id="textID_3" x="0" y="20" font-size="30" font-weight="bold">A</text> |
| <animate xlink:href="#textID_3" attributeName="font-style" values="normal;italic;normal" dur="3s" fill="freeze"/> |
| <animateTransform xlink:href="#textID_3" attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze"/> |
| |
| <g transform="translate(110,0)" font-size="30" font-weight="bold"> |
| <animate attributeName="font-style" values="normal;italic;normal" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20" font-size="30">A</text> |
| </g> |
| |
| <a transform="translate(220,0)" font-size="30" font-weight="bold"> |
| <animate attributeName="font-style" values="normal;italic;normal" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20" font-size="30">A</text> |
| </a> |
| |
| </g> |
| |
| <g id="animateFour" transform="translate(0,140)"> |
| <defs> |
| <g id="animateFourRef" font-size="30"> |
| <text x="0" y="20" fill="#aaa" font-weight="bold">A</text> |
| <text x="30" y="20" fill="#aaa" font-weight="normal">A</text> |
| <text x="60" y="20" fill="#aaa" font-weight="bold">A</text> |
| </g> |
| </defs> |
| |
| <use xlink:href="#animateFourRef"/> |
| <use xlink:href="#animateFourRef" x="110"/> |
| <use xlink:href="#animateFourRef" x="220"/> |
| |
| <text id="textID_4" x="0" y="20" font-size="30">A</text> |
| <animate xlink:href="#textID_4" attributeName="font-weight" values="bold;normal;bold" dur="3s" fill="freeze"/> |
| <animateTransform xlink:href="#textID_4" attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze"/> |
| |
| <g transform="translate(110,0)" font-size="30"> |
| <animate attributeName="font-weight" values="bold;normal;bold" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </g> |
| |
| <g transform="translate(220,0)" font-size="30"> |
| <animate attributeName="font-weight" values="bold;normal;bold" dur="3s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/> |
| <text x="0" y="20">A</text> |
| </g> |
| </g> |
| </g> |
| </g> |
| <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.8 $</text> |
| <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> |
| <script> |
| // Pause the animation at t=0. |
| document.documentElement.pauseAnimations(); |
| </script> |
| </svg> |
