SVGでテキストを制限またはクリップするにはどうすればよいですか？

私はSVGでテーブルを作成しました。データを動的に埋めたいと思います。これは、テキストがどれくらいのスペースを取るか分からず、重複するテキストを切り取ったり隠したりしたいということです。 SVGでどうすればいいですか？SVGでテキストを制限またはクリップするにはどうすればよいですか？

SVGと私のHTML文書は次のようになります。私は私は私のSVG- "テーブル" のテキストをクリッピングすることができますどのような方法があります

enter image description here

：

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
<text x="100" y="100">Orange</text>  <text x="160" y="100">12</text> 
<text x="100" y="115">Pear</text>  <text x="160" y="115">7</text> 
<text x="100" y="130">Banana</text>  <text x="160" y="130">9</text> 
<text x="100" y="145">Pomegranate</text><text x="160" y="145">2</text> 

<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/> 
</svg> 
</body> 
</html>

そして、これがにレンダリングされます？

エリックの答えからソリューション実装：

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
    <text x="10" y="20" clip-path="url(#clip1)">Orange</text>  
    <text x="10" y="35" clip-path="url(#clip1)">Pear</text>  
    <text x="10" y="50" clip-path="url(#clip1)">Banana</text>  
    <text x="10" y="65" clip-path="url(#clip1)">Pomegranate</text> 

    <text x="70" y="20">12</text> 
    <text x="70" y="35">7</text> 
    <text x="70" y="50">9</text> 
    <text x="70" y="65">2</text> 

    <line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/> 

    <clipPath id="clip1"> 
     <rect x="5" y="5" width="57" height="90"/> 
    </clipPath> 
</svg> 
</body> 
</html>

enter image description here

出典

2011-07-14 Jonas

上記の画像では、文字 'a'の中央にクリップが表示されています。代わりにtextPathを使用するhttp://stackoverflow.com/a/9249966/592792 –

clip-pathを使用すると、任意の形状にクリップすることができます。たとえば、svg testsuiteのmasking-path-01を参照してください。クリップ経路を画定

関連部分、：

<clipPath id="clip1"> 
    <rect x="200" y="10" width="60" height="100"/> 
    ... you can have any shapes you want here ... 
</clipPath>

し、このようなクリップパス適用：マルチンポイントで述べたように彼の答え（2）

<g clip-path="url(#clip1)"> 
    ... your text elements here ... 
</g>

出典

2011-07-14 11:00:19

これを行う方法はありますか？ clip-path属性にすべての情報を直接入れるのと同じですか？ – Matthias

@MatthiasデータURIを使用することは可能かもしれませんが、それはむしろ醜いので、すべてのブラウザでサポートされているとは確信していません。しかし、将来、 'clip-path'プロパティで単純な形状を直接使うこともできます。https://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.htmlを参照してください。＃the-clip-path。 –

お返事ありがとうございます。私はこの醜いデータ - ウリのアプローチに興味があります;）あなたは私に例を教えていただけますか？ – Matthias

-1

（1）テーブルのためにSVGを使用する理由はありません。 HTMLテーブルを使用します。

（2）「クリップする」とは、余分なテキストが不明瞭になることを意味することを理解しています。 SVGは、ドキュメントの後の方で指定された要素が先に指定された要素の上に描画される「ペインタのモデル」を使用します。これにより、リージョンをクリップすることができます。

（3）SVGドキュメントでこれを本当に行う必要がある場合は、外部オブジェクトを使用し、HTMLを埋め込むことができます。

出典

2011-07-14 10:26:10 Marcin

HTMLは単なるプレビューで、私はSVGをJava Swingデスクトップアプリケーションでレンダリングするので、HTMLは使用できません。 – Jonas

Jonas、Swingが埋め込みHTMLをレンダリングしないことは確かですか？いずれにせよ、私はクリッピングに関するあなたの質問に答えていると信じています。 – Marcin

SwingはHTMLのサポートが非常に限定されています。テーブルの丸い角はありません。私は 'foreignObject'をIE9で動かすことができません。私は地域を切り抜くことについてもっと試してみるが、あまりにも太っていない。サンプルコードはありますか？ – Jonas

を（残念ながらdownvotedしかし実際にはこれが良い点です）、効果を達成する別の方法は、白色の矩形では望ましくない部分を上書きすることです。

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
<text x="100" y="100">Orange</text>  
<text x="100" y="115">Pear</text>  
<text x="100" y="130">Banana</text>  
<text x="100" y="145">Pomegranate</text> 

<!-- Overpaint the overflowing text --> 
<rect x="155" y="85" width="100" height="100" fill="white" /> 

<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/> 

<text x="160" y="100">12</text> 
<text x="160" y="115">7</text> 
<text x="160" y="130">9</text> 
<text x="160" y="145">2</text> 

</svg> 
</body> 
</html>

svg overlay sample

SVG仕様への参照：SVG 2.0 Rendering Order

出典

2014-08-31 10:58:02 Edward

各要素は異なるサイズを持っている場合は、痛みをすることができclip-pathを、使用しない場合は、その後のことができます。また、ネストした<svg>要素をクリッピングに使用します。 svg要素のCSSスタイルがoverflow:hiddenであることを確認してください。

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
    <svg width="57" height="15" x="10" y="5"><text y="15">Orange</text></svg>  
    <svg width="57" height="15" x="10" y="20"><text y="15">Pear</text></svg> 
    <svg width="57" height="15" x="10" y="35"><text y="15">Banana</text></svg> 
    <svg width="57" height="15" x="10" y="50"><text y="15">Pomegranate</text></svg> 

    <text x="70" y="20">12</text> 
    <text x="70" y="35">7</text> 
    <text x="70" y="50">9</text> 
    <text x="70" y="65">2</text> 

    <line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/> 
</svg> 
</body> 
</html>

出典

2016-03-18 16:57:54 drarmstr

何らかの理由でクリッピングを使用したくない場合は、ネストされたSVGタグを使用することができます。それは、ネストされた外だとき

<svg> 
    <svg x="10" y"10" width"10" height="10"> 
    <text x="0" y="0">Your text</text> 
    </svg> 
</svg>

この方法では、あなたのテキストがカットされますSVGビューポート。textタグのxとyは、ネストされたSVGの座標系を参照し、外側のSVGの座標系では10に対応することに注意してください。

出典

2017-03-05 11:56:54

SVGでテキストを制限またはクリップするにはどうすればよいですか？

答えて

関連する問題