path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z")
path.setAttribute("style","fill:nonestroke:#00fstroke-width:2")
svgdoc.rootElement.appendChild(path)
这个代码是画四分之一个圆，圆环你自己算下坐标，用PATH画，A是画弧线的
path的相关知识，你百度你里面看下，这里就不多说了
Arctext.js自定义圆弧形文字路径的jQuery插件我们可以单独利用CSS3技术去自定义文字旋转路径，但是如果是像如图片所示让文字沿着某个路径去排列还是有点麻烦的，Arctext.js作为一款简单的jQuery插件，就可以帮助我们实现这一效果。
下载文件中为我们免费提供了4种不同的路径效果，使用起来也很简单。
添加HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var $headline = $('#headline').hide()
var $word1 = $('#arc-wrapper').find('h3').hide()
var $word2 = $('#arc-wrapper').find('h4').hide()
var $example1 = $('#example1').hide()
var $example2 = $('#example2').hide()
var $example3 = $('#example3').hide()
var $example4 = $('#example4').hide()
google.load('webfont','1')
google.setOnLoadCallback(function() {
WebFont.load({
google : {
families: ['Montserrat','Concert One']
},
fontactive : function(fontFamily, fontDescription) {
init()
},
fontinactive: function(fontFamily, fontDescription) {
init()
}
})
})
function init() {
$headline.show().arctext({radius: 400})
$word1.show().arctext()
$word2.show().arctext({radius: 148, dir: -1})
$example1.show().arctext({radius: 300})
$example2.show().arctext({radius: 400, dir: -1})
$example3.show().arctext({radius: 500, rotate: false})
$example4.show().arctext({radius: 300})
$('#button_set').on('click', function() {
$example4.arctext('set', {
radius : 140,
dir : -1
})
return false
})
$('#button_anim1').on('click', function() {
$example4.arctext('set', {
radius : 300,
dir : -1,
animation : {
speed : 300,
easing : 'ease-out'
}
})
return false
})
$('#button_anim2').on('click', function() {
$example4.arctext('set', {
radius : 200,
dir : 1,
animation : {
speed : 300
}
})
return false
})
$('#button_reset').on('click', function() {
$example4.arctext('set', {
radius : 300,
dir : 1
})
return false
})
}
</script/>
自定义添加文字
<section class="main">
<div id="arc-wrapper" class="arc-wrapper">
<h3>Just ♦ bend ♦ your ♦ text</h3>
<h4>ABCDEFG</h4>
</div>
</section>
<div class="example">
<h3 id="example1">I wanna be curved</h3>
</div>
<div class="example">
<h3 id="example2">I wanna be different</h3>
</div>
...
如果你想添加更多的路径文字只需要按照上面所说的添加example即可
