How to Include SVG file as <input> background
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 (h开发者_如何学运维tml5) document?
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') }
you can use css class to put svg in inputs:
.passwordInput {
margin-bottom: 2rem;
background: url('./assets/svg/lockIcon.svg') #ffffff 2.5% center no-repeat;
}
<input className="passwordInput"/>
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:
加载中,请稍侯......
精彩评论