Question

我正在使用Raphael的JavaScript库（http://raphaeljs.com/）将一些图形绘制到我的网络应用程序中。我尝试了以下代码：

<html>
<head>
    <title></title>
    <script type="text/javascript" src="raphael/raphael.js"></script>
</head>
<body>    
    <script>
        var paper = Raphael(10, 50, 600, 200);            
        paper.text(300, 50, "first very very long line\nshort line").attr(
            {"font-family":"arial", 
            "font-size":"30",
            "text-align":"left"}
            );
    </script>
</body>
</html>

结果是一个图形，其中两行文本居中。 css font-family和font-size显示正确。但是css text-align被忽略了。为什么呢？

（使用Firefox 8.0和Chrome 15测试）

Answer 1

似乎是Raphael doesn't use text-align property。而是使用text-anchor属性，其可能的值为start，middle，end或inherit。

在您的示例中使用它：

paper.text(300, 50, "first very very long line\nshort line").attr({
    "font-family":"arial", 
    "font-size":"30",
    "text-anchor":"start"
});

Answer 2

paper.text(300, 50, "first very very long line\nshort line").attr(
            {"font-family":"arial", 
            "font-size":"30",
            "text-anchor":"start"}
            );

使用Raphael的库来绘制左对齐的文本

2 个答案: