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により、最初のテキスト行で上向き矢印を押すとフィールドのフォーカスが失われるためです。