How to Include SVG file as <input> backgroun

2019-05-29 00:04发布

站内问答 / Html5
1041 3 3

I'm a newbie to the SVG world, just started experimenting today. I'm trying to create a mobile site where the primary graphics are all scalable, thus supporting all display resolutions.

I created an svg file for my input (currently type="image"), and suprisingly the results are as expected in my code editor (Coda). In testing (mobile Safari, DT Safari and DT FF), the input displays broken image path placeholder (the oath is correct because I can right-click to download the file).

How do I go about including my SVG file in the (html5) document?

3条回答
做自己的国王
2楼-- · 2019-05-29 00:34

You can also include SVG inline, like so:

<!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>

This is supported in IE 9, FF 5, and Chrome 12, but not Safari 5, on Win 7.

Admittedly, this is not a background image, but you could use some CSS to fix that.

Edit: Anders asks, "How would you use this 'inline' svg as a background image?" LMGTFY, Anders. Here's one answer:

<!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>

Here's how Chrome 41 on Win 7 renders it:

enter image description here

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-05-29 00:39

See Using SVG in background-image. The CSS for placing a background image in an input is the same as for any other element:

input { background-image:url('foo.svg') }
查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
4楼-- · 2019-05-29 00:43 
<img src="mysvg.svg ...

Is not currently supported across all browsers rendering engines. Or, should I say it is not supported by the browsers that people are using.

1> Alternatives are xml inline or html inline delivered as an xml document ... also not well supported as I type this.

2> Embed,

3> object

4> iframe (causes a small performance hit as page is downloaded)

5> Google's svgweb can also be used; I have not attempted to use svgweb as a background layer, although it should work fine.

If you are not doing anything more complex than an image, No scripts etc etc. SVGWeb would display correctly across almost every browser. It uses VML to include support with older IE browsers, uses native support when available, and last but not least uses a flash interface to display the SVG.

The "more complex" difficulty is when browsers have basic native support that does not include what svgweb can do and you want to do things not supported by those browser. Then you need to force flash mode.

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)