logo标签列表

如何将SVG文件作为<input>背景包含进来

htmlmobileinputsvgembed
3
我是一个SVG世界的新手，今天刚开始尝试。我正在尝试创建一个移动站点，其中所有主要图形都是可缩放的，因此支持所有显示分辨率。
我为我的输入创建了一个svg文件（当前类型为“image”），令人惊讶的是，在我的代码编辑器（Coda）中，结果与预期相同。在测试（移动Safari、DT Safari和DT FF）中，输入显示为损坏的图像路径占位符（路径正确，因为我可以右键单击下载文件）。
我该如何将我的SVG文件包含在（html5）文档中？
我现在了解到，在移动浏览中，SVG支持并不完整，请参见http://caniuse.com/#cats=SVG。我现在不会实现它，但我非常好奇想知道答案。 - e_known
1
超过 9,000 次浏览，只有一个点赞？这是一个非常出色的问题，没有任何懒得思考的框架或库参与回答。这里本该有成群的点赞。 - John
3个回答
7
请参阅使用SVG作为背景图像。在输入框中放置背景图像的CSS与其他元素相同：
input { background-image:url('foo.svg') }
太棒了。谢谢！我想我们只能等待完全支持了。 - e_known
0

你可以使用CSS类将SVG放入输入框中：

.passwordInput {
  margin-bottom: 2rem;
  background: url('./assets/svg/lockIcon.svg') #ffffff 2.5% center no-repeat;
}
<input className="passwordInput"/>
-1

您也可以像这样内联包含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中支持，但在Win 7上不支持Safari 5。

诚然，这不是背景图片，但您可以使用一些CSS来解决这个问题。

编辑：Anders问道，“你怎么将这个'inline' svg用作背景图片？” LMGTFY，Anders。这里有一个答案：

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

你会如何将这个“inline” SVG 用作背景图片呢？ - Anders Östman
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接