javascript - svg中text标签里面的文字怎么实现垂直和水平的居中～！

Question

html：

<svg id="svg1">
    <polygon points="0,0 80,0 100,12 80,24 0,24 10,12" stroke="black" stroke-width="1" fill="blue" />
    <a href="#">
     <text  dy='.3em' fill="red">你好</text>
    </a>
</svg>

参考网站1:http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/
参考网站2:http://www.html5party.com/2155.html

根据外文网站的方法设置text标签的
css为text-anchor(水平居中)和dominant-baseline(垂直居中)
没有达到想要的效果？

需求:
能否实现垂直居中的效果，即使文本字体数调整，或者字体像素调整，内容还是居中的效果。

求大神指导！

Answer 1

<!-- 设置width和height，后面才能相对定位 -->
<svg id="svg1" width="100" height="24">
    <polygon points="0,0 80,0 100,12 80,24 0,24 10,12" stroke="black" stroke-width="1" fill="blue"></polygon>
    <a href="#">
      <!--
        text-anchor="middle" 表示以文本的中点为基准定位
        x="50%" 表示定位到图片宽度的50%处，也就是居中
        y="50%" 表示文本底部在图片的中央
        dy=".3em" 让文本的底部从图片的中央继续往下移0.3行，从而达到垂直居中
     -->
     <text x="50%" y="50%" dy=".3em" fill="red" text-anchor="middle">你好</text>
    </a>
</svg>

如果不想把大小定死的话，可以用viewBox="0 0 100 24"，反正就是要把图片内容的宽度指定出来，x=50%才知道中间在什么地方。

Answer 2

建议看看慕课网的走进svg的教程，你的问题这个视频给出了完整的解决方案 http://www.imooc.com/video/3778 不仅可以居中还能上下对齐