Можно ли смешивать теги ввода HTML-формы с SVG или использовать SVG для разметки формы?

Нам нравится использовать шаблоны JQuery с SVG, например, чтобы показать продукт с красивой ценой.

Скажем, у нас есть SVG, представляющий сложный макет. Можно ли иметь <input> теги, вложенные в SVG и все еще работающие в HTML 5? Есть ли в SVG альтернативы для ввода данных от пользователя, может быть, извлечение их с помощью Knockout.js?

Я знаю, что вы могли бы использовать SVG в смысле фоновой графики и взламывать позиции так, чтобы поля формы совпали. Я действительно заинтересован в том, чтобы входные операторы передавались SVG, если это возможно.

Источник

1 ответ

Решение

Вы можете использовать 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, но я добавил HTML-элементы между прямоугольником и кругом, используя тег foreignObject. Порядок стека соблюдается, круг находится перед входами.

Другие решения существуют в "чистом" SVG, но они сильно зависят от JavaScript. Вот пример: http://www.carto.net/papers/svg/gui/textbox/

Источник
Другие вопросы по тегам