SVG:链接TextPath上未显示的文本

Question

我正在用JS和D3生成一个SVG。下面的代码是来自生成的SVG的具有代表性的摘录。在http://jsfiddle.net/c8qwjb4n/中，文本不是绘制在路径上，而是在页面的中间，尽管它引用的是组-11。我绝对是个svg初学者，所以对于一个专家来说，这可能只是几秒钟的事情.提前感谢

<?xml version="1.0" encoding="UTF-8"?>
<svg id="svg" width="960" height="750">
<g transform="translate(480,375)">       
    <g class="group">
        <path d="M-146.8148124720131,-340.98676416953145A371.25000000000006,371.25000000000006 0 0,1 -18.55476659174032,-370.78603417163123L-16.867969628854837,-337.07821288330103A337.5,337.5 0 0,0 -133.46801133819372,-309.98796742684675Z"
            style="fill: rgb(170, 170, 170); stroke: rgb(170, 170, 170);"
            id="group-11" />
        <text>
            <textPath href="#group-11">Some text that should be connected to group-11</textPath>
        </text>
    </g>
</g>
</svg>

Answer 1

您应该对textPath元素使用" xlink :href“属性，并在根svg元素中添加svg和xlink的xmlns。

http://jsfiddle.net/defghi1977/51nsadLd/1/

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="960" height="750">
    <g transform="translate(480,375)">       
        <g class="group">
            <path d="M-146.8148124720131,-340.98676416953145A371.25000000000006,371.25000000000006 0 0,1 -18.55476659174032,-370.78603417163123L-16.867969628854837,-337.07821288330103A337.5,337.5 0 0,0 -133.46801133819372,-309.98796742684675Z"
                style="fill: rgb(170, 170, 170); stroke: rgb(170, 170, 170);"
                id="group-11" />
            <text>
                <textPath xlink:href="#group-11">Some text that should be connected to group-11</textPath>
            </text>
        </g>
    </g>
</svg>