如何将 SVG 文件作为包含在内背景

发布于 2024-10-09 07:39:12 字数 252 浏览 1 评论 0原文

我是 SVG 世界的新手，今天才开始尝试。我正在尝试创建一个移动网站，其中主要图形都是可扩展的，从而支持所有显示分辨率。

我为我的输入创建了一个 svg 文件（当前为 type="image"），令人惊讶的是结果与我的代码编辑器 (Coda) 中的预期一致。在测试中（移动 Safari、DT Safari 和 DT FF），输入显示损坏的图像路径占位符（誓言是正确的，因为我可以右键单击下载文件）。

如何将我的 SVG 文件包含在 (html5) 文档中？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

神也荒唐 2024-10-16 07:39:12

请参阅在背景图像中使用 SVG。在输入中放置背景图像的 CSS 与任何其他元素相同：

input { background-image:url('foo.svg') }

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 原文

甜柠檬 2024-10-16 07:39:12

您可以使用 css 类将 svg 放入输入中：

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

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"/>

回复收藏 0 原文

小鸟爱天空丶 2024-10-16 07:39:12

您还可以内联包含 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 来修复那。

编辑：安德斯问，“你如何使用这个‘内联’ 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>

这是 Win 7 上的 Chrome 41 的渲染方式：

在此处输入图像描述

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 原文

~没有更多了~