2

SVGで複数行の編集可能なテキストフィールドを実装しようとしています。私はhttp://jsfiddle.net/ca4d3/に次のコードを持っています：

<svg width="1000" height="1000" overflow="scroll">
  <g transform="rotate(5)">
    <rect width="300" height="400" fill="#22DD22" fill-opacity="0.5"/>
  </g>
  <foreignObject x="10" y="10" overflow="visible" width="10000" height="10000"
  requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
    <p style="display:table-cell;padding:10px;border:1px solid red;
    background-color:white;opacity:0.5;font-family:Verdana;
    font-size:20px;white-space: pre;
    word-wrap: normal; overflow: visible; overflow-y: visible;
    overflow-x:visible;" contentEditable="true"
    xmlns="http://www.w3.org/1999/xhtml">

    Write here some text.
    Be smart and select some word.
    If you wanna be really COOL,
    paste here something cool!

    </p>
  </foreignObject>
</svg>

最新のChrome、Safari、Firefoxでは、コードは何らかの方法で機能しますが、OperaとIE9では機能しません。

目標は次のとおりです
。0）最新のChrome、Safari、Firefox、Opera、IEで動作し、可能であれば一部のパッドで動作します。
1）空白は保持され、テキストは改行文字でのみ折り返されます（Chrome、Safari、Firefoxで機能しますが、OperaとIE 9では機能しません*）。
2）テキストフィールドは編集可能であり（htmlのtextareasおよびcontenteditable p要素と同じ信頼性と安定性のある方法で）、高さと幅はテキストに合うように拡張されます（Chrome、Safari、Firefoxで機能しますが、OperaとIE 9では機能しません*） 。
3）Texfieldは、テキストの編集可能性を維持しながら変換（回転、傾斜、翻訳）できます（回転をテストしましたが、どのブラウザーでも機能しません*）。

  • 編集：異物の回転はFirefox 15.0.1で機能しますが、Safari 5.1.7（6534.57.2）、Chrome 22.0.1229.79、Opera 12.02、IE9では機能しません。MacOSX10.6.8でテスト済み。

4）テキストフィールドは、必ずしもテキストの編集可能性を維持しながら（まだテストされていません）、クリップおよびマスクすることができます。

*）上記のコードを使用

これらはすべてFlashを使用して実現できますが、Flashには深刻な問題があるため、私の目的には適していません（コードを少し変更するたびに、Flexを使用してすべてを再度コンパイルする必要があります。これは低速で、フォントサイズに制限があり、追跡技術があります。はピクセル指向であり、emサイズなどに相対的ではありません）、プラットフォーム間でまだ違いがあります。そして、SVGを試してみたいです！

推測：
ブラウザでの現在のSVGサポートで目標0〜4を達成できますか？この場合、SVG 2.0が役立つのでしょうか？

編集：display：tableをdisplay：table-cellに変更（および新しいjsfiddleを追加）しました。これは、display：tableにより、最初のテキスト行で上向き矢印を押すとフィールドのフォーカスが失われるためです。

4

1 に答える 1

3

コーダーが「ブラウザ」と言うとき、次の 2 つの単語のうちの 1 つは「回避策」であるようです。

したがって、考えられる回避策の 1 つは、contenteditable p を使用し、それを svg の上に配置して、これに変換することです。

一部の svg 要素を contenteditable p の上に配置する必要がある場合は、その上にもう 1 つの svg を追加する必要があります。

この組み合わせは、phantomjs を介して png/pdf にレンダリングできます。

svg マスク、クリップ、またはフィルターが必要な場合、それらは html 要素のどのブラウザーでもサポートされていません。したがって、それらを機能させるには、競合可能な p のテキストをパスに変換し (サーバーからのフォント データを使用するか、より完全な場合はこれを使用してクライアント側でパスデータを取得します)、これらをマスクまたはクリップする必要があります。

簡単な回避策ではありませんが、編集可能なテキストエリアに対する SVG のサポートは非​​常に貧弱です。こことここの仕様はかなり古いですが、編集可能なテキストエリアは今のところほとんどどのブラウザーにも実装されていません。Opera 12.02 には何らかのサポートがありますが、バグがあります。ここで、上下の矢印キーを使用してカーソルを移動してみてください。

于 2012-10-08T21:36:22.077 に答える