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

你应该使用＆＃34; xlink：href＆＃34;属性为textPath元素，并在root 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>

SVG：文本未显示在链接的TextPath上

1 个答案: