d3jsを使ってSVGテキストを正当化することは可能ですか？

M.Bostock's wrap functionを使用してテキストを折り返していますが、それを正当化する方法が見つかりません。d3jsを使ってSVGテキストを正当化することは可能ですか？

これはd3でも可能ですか？そうでなければ、この種のテキスト処理を「模倣する」方法がありますか？

編集：Logikos提案のおかげで、M.Bostockのthis exampleがforeignObjectをsvgに入れています。ここで

は抜粋です：

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500); 
svg.append("foreignObject") 
    .attr("width", 480) 
    .attr("height", 500) 
    .append("xhtml:body") 
    .style("font", "14px 'Helvetica Neue'") 
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Veeery long text");

次に、あなただけのCSSに追加する必要があります。

body {text-align: justify; 
    text-align-last: start; 
}

出典

2017-09-04 solub

...他に、それはややそれをサポートしていると言い、サイトはそれをサポートしていないと言う一つの場所に、IEとエッジでそれを確認する必要があります： 'foreignObject'」はdoesnのすべてのブラウザで動作します。 –

また、 "SVG"をタイトルに追加しました。* "D3 text" *のようなものはありません。ここでの問題はD3ではなくSVGです。 –

@ GerardoFurtadoは正解ですが、サポートはそれほど悪くはありません - http://caniuse.com/#search=foreignObjectオペラミニ以外のほとんどの部分は、あなたがしたいことで動作します。しかし、フィルタリング効果にはいくつかの制限があることを知っています。 – Logikos

それはまさにあなたが探してが、私は、数年前に使用されものではありません。私が働いていないなど、あなたが欲しいしかし、それをスタイルすることができ、HTML、テキストの折り返しなど正当

としてhttp://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

- 代わりにあなたが代わりのforeignObjectタグでSVG内のhtmlを置くことができますラップ模倣するために、その関数を使用しますd3やSVGを5年以上使っていますので、覚えがたいですが、これを共有すると思っていました。

が

< ?xml version="1.0" standalone="yes"?> 
<svg xmlns = "http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="100" height="150" fill="gray"/> 
    <foreignobject x="10" y="10" width="100" height="150"> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div> 
    </body> 

    </foreignobject> 

    <circle cx="200" cy="200" r="100" fill="blue" stoke="red"/> 
    <foreignobject x="120" y="120" width="180" height="180"> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div> 
     <ul> 
      <li><strong>First</strong> item</li> 

      <li><em>Second</em> item</li> 
      <li>Thrid item</li> 
     </ul> 
     </div> 
    </body> 
    </foreignobject> 
</svg>

ブラウザのサポートに注意してください：それはオペラミニ以外のすべてで動作しますと言いhttp://caniuse.com/#search=foreignObject

この

は、私は上記の投稿のリンクから例マークアップです。 IEとEdgeにはいくつかの制限があります。

1 IE11以下はサポートしていません。 2 IEとEdgeは、CSSを使用してHTML要素にSVGフィルタ効果を適用することをサポートしていません。

あなただけの警告

出典

2017-09-04 18:18:12 Logikos

ありがとうLogikos。このソリューションは非常に便利で簡単です。私は私の質問を編集しました。 – solub

d3jsを使ってSVGテキストを正当化することは可能ですか？

答えて

関連する問題