样式SVG用作精灵

时间:2014-08-13 18:48:33

标签: css svg

使用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

1 个答案:

答案 0 :(得分:3)

使用符号&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