我知道外部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>