SVG中的多行可編輯文本框

我試圖在SVG中實現多行可編輯文本框。我在http://jsfiddle.net/ca4d3/以下代碼：SVG中的多行可編輯文本框

<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和IE 9不能。

目標是：
0）適用於最新的Chrome瀏覽器，Safari瀏覽器，Firefox，Opera和IE瀏覽器，如果有可能在某些平板電腦上使用。
1）白色空格被保留，文本只在換行字符上打包（適用於Chrome，Safari和Firefox，但不適用於Opera和IE 9 *）。
2）textfield是可編輯的（與html中的textareas和contenteditable p元素具有相同的可靠和穩定的方式），並且高度和寬度擴展爲適合文本（適用於Chrome，Safari和Firefox，但不適用於Opera和IE 9 *）。
3）Texfield可以在保持文本可編輯性的情況下進行轉換（旋轉，傾斜，翻譯）（測試旋轉，但不適用於任何瀏覽器*）。

編輯：Foreignobject rotation作品在Firefox 15.0.1，但不是在的Safari 5.1.7（6534.57.2），鉻22.0.1229.79，歌劇12.02，IE 9測試在Mac OS X 10.6.8。

4）文本框可以被裁剪和屏蔽，但不一定保持文本的可編輯性（尚未測試）。

使用上面的代碼

*）這些都可以使用Flash來實現，但是Flash有這麼嚴重的問題，它不適合我的目的（在代碼中的每個細微變化後，都使用被再次編譯Flex很慢，字體大小有限制，跟蹤技術是面向像素的，而不是相對於em大小等），並且跨平臺仍然存在差異。我想嘗試一下SVG！

訪客：
我可以在瀏覽器中使用當前的SVG支持達到我的目標0-4嗎？即將到來的SVG 2.0在這種情況下的一些幫助？

編輯：更改顯示：表顯示：表格單元格（並添加新的jsfiddle），因爲顯示：表使該字段在第一個文本行上按下箭頭時失去焦點。

來源

2012-10-06 Timo Kähkönen

IE不支持foreignObject。我懷疑這在IE中支持這一點是無法實現的。 –

看來，當編碼器說「瀏覽器」，接下來的兩個字之一是「解決方法」。

因此，一種可能的解決方法是使用contenteditable p，place it on top of svg並對此進行轉換。

如果某些svg元素必須位於contenteditable p之上，那麼我們必須在頂部添加一個svg。

這種組合可以通過phantomjs呈現給png/pdf。

如果我們想要svg掩碼，剪輯或過濾器，它們在html元素的任何瀏覽器中都不受支持。因此，爲了使它們工作，我們必須將可競爭p上的文本轉換爲路徑（使用來自服務器的字體數據或使用this when it is more complete獲取路徑數據客戶端）並屏蔽或剪輯它們。

不是很簡單的解決方法，但可編輯textareas的SVG支持非常差。現在幾乎沒有在任何瀏覽器中實現Editable textarea，儘管規範here和here比較陳舊。 Opera 12.02有某種支持，但是有錯誤：嘗試here使用向上和向下箭頭鍵移動光標。

來源

2012-10-08 21:36:22

SVG中的多行可編輯文本框

回答

相關問題