<script language="JavaScript1.2">
<!--
        /*
        * Other parts required but not shown here:
        * In the HTML file, each of the input type=button tags contain one of the
        * following attributes:
        *
        *  onclick="append_translate()"
        *  onclick="append_scale()"
        *  onclick="append_rotate()"
        *  onclick="append_skewx()"
        *  onclick="append_skewy()"
        *  onclick="append_matrix()"
        *
        * And the quickie select tag contains the following attribute:
        *
        *  onchange="do_quickie(this)"
        */
        /*
        * This function sets the transform attribute of the "gradient_star"
        * SVG element to the indicated value.
        */
        function set_transform (value)
        {
                var svgobj;
                var svgdoc = document.transform.getSVGDocument();
                svgobj = svgdoc.getElementById('gradient_star');
                svgobj.setAttribute ('transform', value);
                if (document.transf.transform.value != value)
                        document.transf.transform.value = value;
        }
        /*
        * This function appends the indicated value to the existing
        * transform attribute of the "gradient_star" SVG element.
        */
        function add_transform (value)
        {
                var svgobj;
                var svgdoc = document.transform.getSVGDocument();
                svgobj = svgdoc.getElementById('gradient_star');
                var cur_transform = svgobj.getAttribute ('transform');
                svgobj.setAttribute ('transform', cur_transform + ' ' + value);
                document.transf.transform.value = cur_transform + ' ' + value;
        }
        /*
        * This function appends a translation to the existing
        * transform attribute of the "gradient_star" SVG element.
        */
        function append_translate ()
        {
                var f = document.transf;
                if (f.tx.value.search(/^¥s*$/) != -1)
                        f.tx.value = '0';
                if (f.ty.value.search(/^¥s*$/) != -1)
                        f.ty.value = '0';
                add_transform ('translate(' + f.tx.value + ' ' + f.ty.value + ')');
        }
        /*
        * This function appends a scale to the existing
        * transform attribute of the "gradient_star" SVG element.
        */
        function append_scale ()
        {
                var f = document.transf;
                if (f.sx.value.search(/^¥s*$/) != -1)
                        f.sx.value = '1.0';
                if (f.sy.value.search(/^¥s*$/) != -1)
                        add_transform ('scale(' + f.sx.value + ')');
                else
                        add_transform ('scale(' + f.sx.value + ' ' + f.sy.value + ')');
        }
        /*
        * This function appends a rotate to the existing
        * transform attribute of the "gradient_star" SVG element.
        */
        function append_rotate ()
        {
                var f = document.transf;
                if (f.angle.value.search(/^¥s*$/) != -1)
                        f.angle.value = '0';
                add_transform ('rotate(' + f.angle.value + ')');
        }
        /*
        * This function appends a matrix to the existing
        * transform attribute of the "gradient_star" SVG element.
        */
        function append_matrix ()
        {
                var f = document.transf;
                // Check that there are no gaps in the fields.
                var i;
                for (i = 6;  i > 0;  i--)
                {
                        if (f.elements['val'+i].value.search(/^¥s*$/) == -1)
                                break;
                }
                if (i > 0)
                {
                        for (i--;  i > 0;  i--)
                        {
                                if (f.elements['val'+i].value.search(/^¥s*$/) != -1)
                                {
                                        alert ('Please do not leave any of the leftmost fields blank.');
                                        return;
                                }
                        }
                }
                add_transform ('matrix('
                        +f.val1.value+' '
                        +f.val2.value+' '
                        +f.val3.value+' '
                        +f.val4.value+' '
                        +f.val5.value+' '
                        +f.val6.value+')'
                );
        }
        /*
        * This function sets the transform attribute of the "gradient_star"
        * SVG element to the value of the option selected in the Quickies
        * list.
        */
        function do_quickie (fld)
        {
                if (fld.selectedIndex == 0)
                        return;
                set_transform (fld.options[fld.selectedIndex].value);
                fld.selectedIndex = 0;
        }
// -->
</script>
変形のレッスンに戻る