Question

是否可以仅在某个项目中使用svg-use语法嵌入svg图标？我可以轻松地设置图标的样式，但是当我在导航项目中使用图标时，我想设置一个svg图标的一部分。

这是我尝试过的，没有任何成功。

// css
.nav-item .part1{
 opacity: 0.5;
}

使用svg时这样：

<svg id="svg_sprite" style="display: none;">
  <defs>
    <g id="icon">
      <polygon points="476.5,379.778 401.167,..."></polygon>
      <polygon class="page1" points="221,379.768 85.334,..."></polygon>
    </g>
  </defs>
</svg>

<li class="nav-item">
  <svg viewBox="0 0 512 512" class="icon">
    <use xlink:href="#icon"></use>
  </svg>
</li>

Answer 1

答案是否定的。您无法根据元素是否已被<use>引用来设置元素的样式。 SVG规范具体说明了这一点。原因是<use>引用的内容只是一个＆＃34;概念性克隆＆＃34;并且实际上并不是DOM的一部分。

http://www.w3.org/TR/SVG11/struct.html#UseElement

使用时使用svg的样式部分

1 个答案: