<div contentEditable>
<svg viewBox='0 0 300 300'>
<text x=2 y=40>
Can this be a text input field?
</text>
<text y=80>
But not this
</text>
<text y=110>
And not this
</text>
</svg>
</div>上述 SVG 中的文本是可編輯的，因為它包含在 中<div contentEditable>，但是對于我們的用例來說，這并不理想：
- 最重要的是，我們正在使用 React，我們希望可編輯文本在狀態下進行控制。
- 上述 SVG 中的所有文本都是可編輯的，而不僅僅是所需的第一個文本欄位
- 這是一輛大車，游標向右移動很遠
可以創建一個單獨控制（使用 React useState）的 SVG 文本欄位嗎？
編輯：這些方面的東西似乎確實有效：
const [test, setTest] = useState('here is some text');
// And Return
return (<>
<svg>
<foreignObject x="40" y="40" width="300" height="150">
<div xmlns="http://www.w3.org/1999/xhtml">
<FormControl
className='modal-input'
type='text'
value={test}
onChange={(e) => setTest(e.target.value)}
name='firstname'
placeholder='First Name'
/>
</div>
</foreignObject>
...
react-bootstrap 來自哪里FormElement。我們將繼續使用它，看看它是否完全適合我們的用例，但到目前為止，一切都很好！
uj5u.com熱心網友回復：
<foreignObject>您可以使用標簽（專門設計用于允許 SVG 中的 HTML ）在 SVG 中嵌入 HTML 片段（例如包括 React 門戶）。順便說一句，我認為如果您只想將一些輸入嵌入到 SVG 中，那么使用contenteditable它似乎沒有任何意義。正常使用就好<inputs>
<svg viewBox='0 0 300 300'>
<foreignObject x='0' y='0' width='100' height='100'>
<div contenteditable>
Can this be a text input field?
</div>
</foreignObject>
<text y='80'>
But not this
</text>
<text y='110'>
And not this
</text>
</svg>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533199.html
上一篇：從另一個檔案的一行中獲取資料