主页 / 问题 / 649685
Accepted
Anton Essential
Asked:2020-04-07 19:37:00 +0800 CST2020-04-07 19:37:00 +0800 CST

如何返回 svg 图标的原生颜色？

  • 772

下午好，可以恢复图标的默认颜色吗？如果我通过 svg 标签抛出 svg，颜色会正确显示，但我仅通过使用推送图标，我不会将它作为一块 svg 抛入正文

mixin icon(name)
  svg(class="icon icon_" + name)&attributes(attributes)
    use(xlink:href=config.path.images + "/icons.svg#" + name)

然后图标被一种颜色填充，如何解决？上面，图标是通过use推送的，下面的选项，照原样，我把svg标签放在了文档的正文中。 在此处输入图像描述

html

1 个回答

  1. Best Answer

    一旦使用该命令，use对象就会落入阴影 DOM 中，并且图标的样式不起作用。为了解决这个问题，您需要：

    1. 去掉图标代码中补丁、多边形等的所有样式属性，所有内联样式 - fill,stroke
    2. 添加到样式表path{ fill:inherit; stroke:inherit; }
    3. 样式表中已在图标类级别完成的图标样式化
    4. 在指向外部样式表的图标文件的标题中添加一行
      <?xml-stylesheet type="text/css" href="style.css"?>
      1. 样式表文件和 SVG 文件最好放在同一个文件夹中，因为浏览器对此比其他浏览器更敏感chrome
    • 1

相关问题