加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 将CSS背景图像设置为内联SVG符号?

发布时间:2020-12-14 21:31:28 所属栏目:资源 来源:网络整理
导读:我知道外部svg文件可以链接到背景图像: background-image: url(Icon.svg); 并且符号id可以从外部svg文件定位: background-image: url(Icons.svg#Icon-Menu); 但是如何将背景图像设置为内联svg符号? *(如下) * 我的svg位于我的网页正文的顶部,而不是外部
我知道外部svg文件可以链接到背景图像:
background-image: url(Icon.svg);

并且符号id可以从外部svg文件定位:

background-image: url(Icons.svg#Icon-Menu);

但是如何将背景图像设置为内联svg符号? *(如下) *

我的svg位于我的网页正文的顶部,而不是外部文件。

我想要.test背景图像成为#图标菜单符号。

.test{
  background:#ddd url('../#Icon-Menu');
  height:100px;
  width:100px;
  display:block;
}
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="Icon-Menu" viewBox="0 0 512 512">
      <title>Menu</title>
      <path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3h86.833c1.654,3-1.346,3-3V8.333	C96.417,6.679,95.071,5.333,93.417,5.333z" />
      <path d="M93.417,40.333H6.583c-1.654,3-3V43.333	C96.417,41.679,40.333,40.333z" />
      <path d="M93.417,75.333H6.583c-1.654,3-3V78.333	C96.417,76.679,75.333,75.333z" />
    </symbol>
  </svg>
</div>

<div class="test"></div>

解决方法

图像必须是完整的文件。

从SVG specification …

‘image’元素表示一个完整文件的内容将被渲染…(对于background-image等也是如此)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读