Как включить SVG-файл в качестве <input>фона - PullRequest
Новая
       38

Как включить SVG-файл в качестве <input>фона

2 голосов
/ 27 декабря 2010

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

Я создал файл SVG для своего ввода (в настоящее время type = "image"), и, как ни странно, результаты в моем редакторе кода (Coda) такие же, как и ожидалось. При тестировании (мобильное Safari, DT Safari и DT FF) на входе отображается заполнитель пути с поврежденным изображением (клятва верна, поскольку я могу щелкнуть правой кнопкой мыши, чтобы загрузить файл).

Как мне включить SVG-файл в документ (html5)?

Ответы [ 3 ]

7 голосов
/ 27 декабря 2010

См. Использование SVG в background-image . CSS для размещения фонового изображения на входе такой же, как и для любого другого элемента: 

input { background-image:url('foo.svg') }
0 голосов
/ 23 июня 2011

Вы также можете включить встроенный SVG, например: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h2>Red Circle via SVG</h2>
        <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
        </svg>
    </body>
</html>

Это поддерживается в IE 9, FF 5 и Chrome 12, но не в Safari 5, на Win 7.

Следует признать, что это не фоновое изображение, но вы можете использовать немного CSS, чтобы исправить это.

Редактировать: Андерс спрашивает: "Как бы вы использовали этот 'встроенный' svg в качестве фонового изображения?"LMGTFY, Андерс.Вот один из ответов: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            span { position: absolute; }    
            span.svg { z-index: -1; }
        </style>
    </head>
    <body>
        <h2>Red Circle via SVG</h2>
        <div>
            <span>
                <p>Use CSS to position the circle and put it in the background "behind" the text.</p>
            </span>
        </div>
        <div>
            <span class="svg">
                <svg id="svgelem" height="100"  xmlns="http://www.w3.org/2000/svg">
                    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
                </svg>
            </span>
        </div>
    </body>
</html>

Вот как Chrome 41 в Win 7 отображает его:

enter image description here

0 голосов
/ 27 декабря 2010 
<img src="mysvg.svg ...

В настоящее время не поддерживается во всех браузерах движков рендеринга.Или, если я скажу, что это не поддерживается браузерами, которые используют люди.

1> Альтернативы - xml inline или html inline, поставляемые в виде xml документа ... также не очень хорошо поддерживаются, когда я печатаю это.

2> Embed,

3> object

4> iframe (приводит к небольшому снижению производительности при загрузке страницы)

5> svgweb от Google также можетиспользоваться;Я не пытался использовать svgweb в качестве фонового слоя, хотя он должен работать нормально.

Если вы не делаете ничего более сложного, чем изображение, никаких сценариев и т. Д. И т. Д. SVGWeb будет отображаться корректно практически во всех браузерах.Он использует VML для включения поддержки со старыми браузерами IE, использует встроенную поддержку, когда она доступна, и, что не менее важно, использует флэш-интерфейс для отображения SVG.

«Более сложная» трудность заключается в том, что браузеры имеют базовую встроенную поддержкуэто не включает то, что может сделать svgweb, и вы хотите делать вещи, которые не поддерживаются этим браузером.Тогда вам нужно включить режим вспышки.

http://code.google.com/p/svgweb/

...