用作精灵时的样式 SVG [重复]

【问题标题】：Style SVG when used as sprite [duplicate]用作精灵时的样式 SVG [重复]
【发布时间】：2014-10-07 06:29:04
【问题描述】：

在使用 SVG sprite 时，有没有办法针对正在使用的图标内的组和路径（相对于父容器）？

<a href="index.php" id="logo-type">
            <svg><use xlink:href="#logo"></use></svg>
        </a>

我希望能够将另一个类的应用程序上的图标外观更改为父容器。

#logo-type{

        svg{
            height: 100px;
            width: 100px;

            ellipse{ fill: blue;}
       g {stroke:red;} 

        } 


    &.active {  

        ellipse{ fill: yellow;}
       g {stroke:purple;} 

    }

}

http://codepen.io/anon/pen/wsmGF

【问题讨论】：

标签： css svg

【解决方案1】：

当使用符号和/或 defs (AFAIK) 时，您必须为 <use> 提供它自己的 ID/Class 和目标

HTML

<a href="index.php" id="logo-type" class="active">
  <svg><use id="used" xlink:href="#logo"></use></svg>
</a>

CSS

#used {
  stroke:white; /* works */
}

#used #pg { /* doesn't work */
  fill:red;
}

但是，您不能在<use>...AFAIK

中定位单个路径等

Codepen Demo

【讨论】：