2014/08/22-SVG

I. Project Functional requirements: map the span Element Set in HTML to an SVG file.

Parameters: absolute positioning coordinates of span and the set of transform, absolute positioning coordinates of the anchor of the beiser curve and absolute positioning coordinates of the control points (draw span Based on the curve path ), SPAN sets the width and height of the parent container.

Output: the string format of SVG.

Ii. Knowledge Point: Since the CSS transform style is involved, the related theoretical knowledge of matrix is used.

1. Text changed along the path: SVG provides the <textpath> element to produce the effect that the text is arranged along a predefined curve path;

<SVG> <defs> <path id = "pathpredef" d = "corresponding path value"/> </defs> <text fill = "#000"> <textpath xlink: href = "# pathpredef"> text content </textpath> </text> </SVG>

Example

2. SVG coordinate system:

The viewbox attribute is used to redefine the coordinate range of the view, so that the default coordinate measurement unit also changes.

<SVG width = "3 cm" Height = "3 cm" viewbox = "0 0 300 300">... </SVG>

Change the measurement unit of the default user coordinate system to 0.01. (Note: The four parameters are left top width height)

3. Draw a cubic besell curve:

A curve is defined as a starting point, ending point (both called an anchor), and two separated intermediate points (both called a control point ).

The draw command (data) in SVG is: "C X1 Y1 X2 Y2 destx desty" (x1 Y1 is the control point 1, X2 Y2 is the control point 2, and destx desty is the end point, C is a normal plot)

In addition to normal painting, there is also a smooth drawing of S, the difference is that there is only one control point, that is, s only one control point.

4. Related transform matrix format in SVG

Rotate: [cos (a) Sina (a)-sin (a) Cos (a) 0 0] (a is the rotation of rad, deg = rad/π * 180)

Swekedx: [1 0 Tan (a) 1 0 0]

Swekedy: [1 Tan (a) 0 1 0]

Scale: [SX 0 0 Sy 0 0] (SX scales by X axis, Sy scales by Y axis)

=[A B C D E F]

(For details, see W3C SVG standard documentation)

5. matrix transformation formula of two-dimensional coordinate system

　　

(See the coordinates after SVG Element conversion, that is, inverse matrix)

Iii. Related code and class libraries used:

1. matrix multiplication: (a class library is replaced)

function _matrixMultiply(arr1, arr2) {            var returnArr = [],                lenCol = arr1[0].length > arr2[0].length ? arr1[0].length : arr2[0].length,                lenRow = arr1.length > arr2.length ? arr1.length : arr2.length,                i, j, arr1Item, arr2Item, sum;            for (i = 0; i < lenRow; i++) {//row                sum = 0;                returnArr[i] = [];                for (j = 0; j < lenCol; j++) {//col                    returnArr[i][j] = _pointSum(i, j, arr1, arr2);                }            }            return returnArr;        }        function _pointSum(i, j, arr1, arr2, undefined) {            var sum = 0, index = 0, isArr1Spill = false, isArr2Spill = false;            while (!isArr1Spill || !isArr2Spill) {                isArr1Spill = arr1[i] === undefined || arr1[i][index] === undefined;                isArr2Spill = arr2[index] === undefined || arr2[index][j] === undefined;                sum += (isArr1Spill ? 0 : arr1[i][index]) * (isArr2Spill ? 0 : arr2[index][j]);                index++;            }            return sum;        }

2. Matrix Class Library: Sylvester

Matrix. Create ([[], [], []) returns the matrix object;
. Elements attributes contain Matrix Values
. Multiply (matrixobject) method for multiplication
Obtain the inverse matrix using the. Inverse () method.
End