2

ブラウザに依存しないコードを書きたいです。私の目標は、テキストが中央に配置された円弧を表示することです。

ここに画像の説明を入力

そのために、d3.js を使用して弧を描きます。

var elem = vis.append("svg:path")
    .attr("d", myarc(inR, outR, startA, endA, orient))
    .attr("transform", "translate(200,200)")
    .attr("fill", "rgb(255, 255, 255)")
    .style("stroke-width", 0.2)
    .style("stroke", "#BBB")
    .attr("id", "0_1");

次に、テキストをそれにバインドして円弧をたどり、円弧の半径の半分からy方向に、角度の長さの半分から移動しxます。

text.append("text")
    .style("font-size", "14px")
    .style("font-weight", "bold")
    .attr("dx", spaceLength / 2.0)
    .attr("dy", 25)
    .attr("method", "stretch")
    .attr("spacing", "auto")
    .append("textPath")
    .attr("xlink:href", "#0_1")
    .attr("text-anchor", "middle")
    .text("Test text :)");

私の問題は、Chrome と Firefox がこのコードを同じようにレンダリングしないことです。このdx属性は、Chrome では Firefox よりも 2 倍多くテキストを右にシフトしています。

Firefox でレンダリングする方法は次のとおりです。

ここに画像の説明を入力

Firefox で動作させるには、以下を置き換える必要があります。

    .attr("dx", spaceLength / 2.0)

に

    .attr("dx", spaceLength)

ブラウザ検出機能を実装せずに、このコードを両方のブラウザで同じように表示するにはどうすればよいですか?

この 2 つのブラウザーでのレンダリングの違いは何によって生じているのでしょうか?

問題を再現する完全なコード サンプルは、http: //jsfiddle.net/taxQK/1/から入手できます。

どうもありがとう

4

2 に答える 2

2

テキスト サポートは、リリースされたばかりの Firefox 25 で書き直されました。そのバージョンで試してみると、あなたの例は期待どおりに機能します。Firefox の最新リリース バージョンに更新するだけでよい場合もあります。

于 2013-11-02T09:54:51.567 に答える
1

このライブラリには、Firefox、Chrome、Safari、および IE で機能する円の外側でテキストを回転させる実装が含まれています。使用はお勧めしませんが、そのソース コードでトリックが明らかになるはずです。

https://github.com/danielstern/MagicCircles

開示：これは私のライブラリです。

于 2015-02-18T19:11:15.657 に答える