svg -> text文本水平、垂直居中。文本垂直对齐方式 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            svg{
              width: 300px;
              height: 150px;
            }
            path {
              fill: #4682B4;
            }
            text {
                  stroke: #fff;
                  stroke-width: 1;
                  font-size: 20px;

                  text-anchor: middle;  /* 文本水平居中 */
                  dominant-baseline: middle; /* 文本垂直居中 */
            }
    </style>
    </head>
    <body>
        <svg>
          <path d="M150 0 L75 200 L225 200 Z" />
          <text x='150' y='75'>1</text>
        </svg>
      <svg>
          // dominant-baseline设置文本垂直对齐方式，text-before-edge设置文本在边缘，恰好完全显示
          <text dominant-baseline=text-before-edge>你好</text>
      </svg>
    </body>
</html>
posted @ 2017-02-07 15:06  ning0_o  阅读(6193)  评论(0)  编辑  收藏  举报