样式SVG用作精灵

Question

使用SVG精灵时，是否有办法将目标图块和路径内的路径相对于父容器定位？

<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

Answer 1

使用符号＆amp; /或defs（AFAIK）时，您必须提供<use>自己的ID /类并定位

<强> 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