web-dev-qa-db-ja.com

HTMLフォーム入力タグをSVGと混合したり、SVGを使用してフォームをレイアウトしたりすることは可能ですか？

たとえば、SVGでJQueryテンプレートを使用して、適切なスタイルの価格で製品を表示するのが好きです。

複雑なレイアウトを表すSVGがあるとします。 <input>タグをSVGにネストし、HTML 5内で機能させることは可能ですか？ SVG内に、ユーザーからデータを入力するための代替手段がありますか？おそらくKnockout.jsでそれらを抽出しますか？

背景グラフィックの意味でSVGを使用し、フォームフィールドが揃うように位置をハックできることを私は知っています。可能であれば、入力ステートメントをSVGに流してもらうことに本当に興味があります。

jqueryhtmlsvgknockout.jsform-design
29
Zachary Scott

foreignObject を使用できます。小さな例：

<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
    <rect x="25" y="25" width="250" height="200" fill="#ff0000" stroke="#000000"/>
    <foreignObject x="50" y="50" width="200" height="150">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <form>
                <input type="text"/>
                <input type="text"/>
            </form>
        </body>
    </foreignObject>
    <circle cx="60" cy="80" r="30" fill="#00ff00" fill-opacity="0.5"/>
</svg>

これは標準のSVGですが、foreignObjectタグを使用してrectとcircleの間にHTML要素を追加しました。スタックの順序が尊重され、円は入力の前にあります。

他のソリューションは「純粋な」SVGに存在しますが、JavaScriptに大きく依存しています。ここに例があります： http://www.carto.net/papers/svg/gui/textbox/

32
Planplan