Raphael的text及对齐方式

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index006.js"></script>

</head>

<body>

<div id="container"></div>

</body>

</html>

$(function() {

    initRaphael();

});

function initRaphael(e) {

    // 这样会根据container这个ID找到该对象

    var paper = Raphael('container', 500, 500);

    var t = paper.text(200, 20, 'abc').attr('font-size', 16);

    var rec = paper.rect(200, 40, 100, 5).attr({

        fill : '#ccf',

        'stroke-width' : 0

    });

    var t2 = paper.text(200,60,'def').attr({

        // 水平左侧对齐；

        'text-anchor':'start',

        'font-size':16,

        'font-family':'Courier New'

    });

    // 垂直方向距离是可以调整的，查看生成的svg <text>对象，里面有<tspan>对象，里面有dy属性，这个属性控制了垂直方向的对齐方式；

    var l = paper.path('M200,20h100m-100,0v100M200,60h100');

    // 获取属性；

    console.log(t2.attr('text-anchor'));

}