使用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;}
}
}
答案 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