web-dev-qa-db-ja.com

SVGワードラップ-ストッパーを表示しますか？

楽しみのために、暇なときにいじり回しているRIA用のSVGブラウザークライアントをどこまで実装できるかを確認しようとしています。

しかし、巨大なつまずきのように見えるものにぶつかりました。ワードラップはありません!!

誰かが回避策を知っていますか（私は知らないJavaScriptまたは特別なタグのようなものを考えています）？

そうでない場合は、xhtmlルートに移動してSVG（ouch）にHTML要素を貼り付けるか、SVG1.2の準備ができてから10年後に再び戻ってくる必要があります。

svgword-wrap
22
ChrisInCambo

これによると ドキュメント 、 tspan ワードラップのような錯覚を与えることができます：

Tspanタグはテキストタグと同じですが、テキストタグ内およびそれ自体の内部にネストできます。 'dy'属性と組み合わせると、SVG1.1でのワードラップの錯覚が可能になります。 'dy'は、最後に描画されたグリフ（文字）を基準にしていることに注意してください。

10
David Segonds

ForeignObjectタグもあります。次に、最大の柔軟性を提供するSVGにHTMLを埋め込むことができます。 HTMLはドキュメントのレイアウトに最適であり、アプリケーションのレイアウト、描画、および開発者が必要とするすべてのものをサポートするために、際限なくハッキングされています。しかし、その強みはワードラップとドキュメントレイアウトです。 HTMLに最善を尽くさせ、SVGに最善を尽くさせます。

http://www.w3.org/TR/SVG/extend.html

これは、IE（IE11以降）を除くほとんどのブラウザーFireFox、Opera、Webkitで機能します。: Webの話ではありませんか？

---（http://schmerg.com/svg-support-in-ie9-close-but-should-try-harde

15
chubbsondubs

このSVGのものは困惑していますね。

ありがたいことに、 can はいくつかの良い結果を達成できますが、HTML5を使用するよりも多くの作業が必要です。

これが私のASP.Net/ SVGアプリのスクリーンショットで、少し「偽の」ワードラップが特徴です。

enter image description here

次の関数は、SVG text要素を作成し、tspanの断片に分割します。ここで、各行の長さは20文字以下です。

<text x="600" y="400" font-size="12" fill="#FFFFFF" text-anchor="middle">
    <tspan x="600" y="400">Here a realy long </tspan>
    <tspan x="600" y="416">title which needs </tspan>
    <tspan x="600" y="432">wrapping </tspan>
</text>

完璧ではありませんが、シンプルで高速であり、ユーザーは違いを知ることはありません。

私のcreateSVGtext（） JavaScript関数は、x位置、y位置、および表示されるテキストの3つのパラメーターを取ります。フォント、1行あたりの最大文字数、テキストの色はすべて私の関数でハードコーディングされていますが、これは簡単に変更できます。

上のスクリーンショットに示されている右側のラベルを表示するには、次を使用して関数を呼び出します。

var svgText = createSVGtext("Here a realy long title which needs wrapping", 600, 400);
$('svg').append(svgText);

そして、これがJavaScript関数です。

function createSVGtext(caption, x, y) {
    //  This function attempts to create a new svg "text" element, chopping 
    //  it up into "tspan" pieces, if the caption is too long
    //
    var svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    svgText.setAttributeNS(null, 'x', x);
    svgText.setAttributeNS(null, 'y', y);
    svgText.setAttributeNS(null, 'font-size', 12);
    svgText.setAttributeNS(null, 'fill', '#FFFFFF');         //  White text
    svgText.setAttributeNS(null, 'text-anchor', 'middle');   //  Center the text

    //  The following two variables should really be passed as parameters
    var MAXIMUM_CHARS_PER_LINE = 20;
    var LINE_HEIGHT = 16;

    var words = caption.split(" ");
    var line = "";

    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + " ";
        if (testLine.length > MAXIMUM_CHARS_PER_LINE)
        {
            //  Add a new <tspan> element
            var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
            svgTSpan.setAttributeNS(null, 'x', x);
            svgTSpan.setAttributeNS(null, 'y', y);

            var tSpanTextNode = document.createTextNode(line);
            svgTSpan.appendChild(tSpanTextNode);
            svgText.appendChild(svgTSpan);

            line = words[n] + " ";
            y += LINE_HEIGHT;
        }
        else {
            line = testLine;
        }
    }

    var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    svgTSpan.setAttributeNS(null, 'x', x);
    svgTSpan.setAttributeNS(null, 'y', y);

    var tSpanTextNode = document.createTextNode(line);
    svgTSpan.appendChild(tSpanTextNode);

    svgText.appendChild(svgTSpan);

    return svgText;
}

ワードラップのロジックは このHTML5 Canvasチュートリアル に基づいています

これがお役に立てば幸いです。

マイク

http://www.MikesKnowledgeBase.com

[〜＃〜] update [〜＃〜]

私が言及するのを忘れた一つのこと。

上に示した「ワークフロー図」画面は、もともとHTML 5 canvasを使用して作成されたものです。それは美しく機能し、アイコンをドラッグしたり、アイコンをクリックするとポップアップメニューが表示されたり、IE8でさえ満足しているように見えました。

しかし、図が「大きすぎる」（たとえば4000 x 4000ピクセル）と、すべてのブラウザで初期化に失敗し、JavaScriptコードに関する限り何も表示されないことがわかりましたbut-懸念して、すべてが正常に機能していました。

そのため、エラーチェックを行っても、ダイアグラムが空白で表示され、このショートッパーの問題がいつ発生したかを検出できませんでした。

var canvasSupported = !!c.getContext;
if (!canvasSupported) {
    //  The user's browser doesn't support HTML 5 <Canvas> controls.
    Prompt("Workflow", "Your browser doesn't support drawing on HTML 5 canvases.");
    return;
}

var context = c.getContext("2d");
if (context == null) {
    //  The user's browser doesn't support HTML 5 <Canvas> controls.
    Prompt("Workflow", "The canvas isn't drawable.");
    return;
}

//  With larger diagrams, the error-checking above failed to notice that
//  the canvas wasn't being drawn.

そのため、代わりにSVGを使用するようにJavaScriptコードを書き直さなければなりませんでした。大きな図にうまく対処できるようです。

13
Mike Gledhill

SVGT 1.2ではtextArea要素が導入されています http://www.w3.org/TR/SVGTiny12/text.html#TextInAnArea ですが、実験的にサポートされているのはOpera現時点では10です。他のブラウザが実装を計画しているかどうかはわかりませんが、実装することを望んでいます。

11
codedread

svg.js ライブラリには svg.textflow.js プラグインがあります。超高速ではありませんが、うまくいきます。オーバーフローしたテキストをデータ属性に格納することもできるため、継続的に流れる列を作成するために使用できます。 ここにテキストフローの例のページ 。

2
wout

別の方法は、Andreas Neumanの テキストボックス オブジェクトを使用することです。

0
eft

私は、Wordをsvgで何時間（または何日）も折り返すことについての解決策を探していました。アプリで可能な場合は、コードを編集してtspanまたはその他のメソッドを配置します。

テキストラッピングは1.2バージョンで実装されますが、オペラを除いて、まだ完全に実装されているブラウザはありません（4年、仕様はW3にあります...）。

いくつかの配置設定を使用する必要があったため、多くのフォーラムが提供できるコードを使用できませんでした（異物、cartoスクリプトなどはありません）。

私がこのメッセージを投稿した場合、それは、Word wrapping svgをグーグルで検索するときに他の人に役立つようにするためです。これは、この投稿が一番上の結果であり、多くの場合、この投稿は役に立たないためです。

これがクールで簡単で軽い解決策です： http://dev.w3.org/SVG/profiles/1.1F2/test/svg/text-dom-01-f.svg

0
mickael

最近、flowParaはワードラップを実行できますが、それを適切にサポートするブラウザーをまだ見つけていません。

0
Marcin