Question

我试图使用svg显示关闭图标，但它没有显示任何内容任何人都可以帮助我如何得到这个。这看起来很简单，但我不明白为什么它不起作用

SCSS：

.close {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='#666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    cursor: pointer;
    padding-left: 5px;
  }

HTML

  <div class='close'></div>

Answer 1

您只需要定义宽度和高度。

代码段：

＆＃13;

.close {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='#666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  cursor: pointer;
  padding-left: 5px;
  width: 50px;
  height: 50px;
}

＆＃13;

<div class='close'></div>

＆＃13;

但是，如何使用SVG <symbol>标签呢？您将编写语义HTML，并且可以使用<use>标记在任何地方使用它。

这是一个关于如何实现这一目标的简单演示。

＆＃13;

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon-close {
  font-size: 3em;
  color: red;
  opacity: .6;
}

＆＃13;

<a href="#">
  <svg class="icon icon-close">
    <use xlink:href="#icon-close"></use>
  </svg>
</a>

<svg style="display:none;">
  <symbol id="icon-close" viewBox="0 0 53.7 53.7">
    <title>Close icon</title>
    <path d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z' />
  </symbol>
</svg>

＆＃13;

使用SVG的关闭图标未显示

1 个答案: