SVG text on a circle

by jorgeluis

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="220px" height="220px">

  <defs>
    <path id="circlepath" 
            d="
            M 100, 100
            m -75, 0
            a 75,75 0 1,1 150,0
            a 75,75 0 1,1 -150,0
            "
      />
  </defs>

  <use xlink:href="#circlepath" fill="none" stroke="red"  />

  <text font-family="Verdana" font-size="13">
    <textPath xlink:href="#circlepath">
     We hold these truths to be self evident
    </textPath>
  </text>

</svg>

CSS

circle, path {
    fill: none;
    stroke-width: 5;
    stroke-opacity: .5;
}

circle {
    stroke: red;
}
path {
    stroke: yellow;
}