svg 弯曲文字居中

svg 弯曲文字居中

by Robbie Yang

HTML

<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><g id="groupText"><!----> <path id="myPath" d="M0 100 C 270 0, 540 0, 800 100" stroke-dasharray="5" stroke="transparent" fill="transparent" style="stroke: rgb(0, 0, 0);"></path> <text id="text" filter="" font-weight="normal" font-family="Verdana" stroke="#000" stroke-width="0" font-size="28" letter-spacing="0" word-spacing="0" text-anchor="middle" fill=""><textPath xlink:href="#myPath" startOffset="52%"> aaa </textPath></text></g> <!----></defs> <use xlink:href="#groupText"></use></svg>

SCSS

svg { 
  margin: 0;
  padding: 0;
  width: 801.1875px;
  height: 146px;
  text-align: center;
  border: solid 1px #5cadff;
  font-family: Arial;
}