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

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

29 голосов
/ 12 мая 2011

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

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

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

1 Ответ

32 голосов
/ 12 мая 2011

Вы можете использовать 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...