Question

我有一个SVG精灵，其中包含许多图标，但为了简单起见，我们可以说它如下所示：

<svg>
    <symbol viewBox="0 0 612 612" id="icon-foo">
        <path class="a" d="..."/>
        <path class="b" d=..."/>
        <path class="c" d="..."/>
    </symbol>
</svg>

使用XMLHttpRequest将此SVG精灵添加到页面底部。

要在页面上显示图标，我将使用以下内容：

<svg id="bar">
    <use xlink:href='#icon-foo'></use>
</svg>

一切正常，我看到页面上的图标。

问题：

正如您在精灵中所看到的，我在path元素上有3个symbol元素，其中icon-foo元素的标识为bar，在我显示图标的页面中，我的ID为svg元素是path。

我希望能够使用css分别设置每个#icon-foo .a {} #icon-foo .b {} #icon-foo .c {}的样式，但对我有用的唯一方法是将它们设置为这样：

#bar .a {}
#bar .b {}
#bar .c {}

这并不是很有用，特别是如果我想在同一页面上使用不同的颜色/选项显示两次图标。

理想情况下，我认为这样的事情可行：

.a, .b, .c

但它不起作用，因为很明显我们的#bar元素中没有子元素xlink:href。

我的问题：

是否可以使用using (var con= new SqlConnection(ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString)) { try { // many transactions } catch (Exception e) { con.BeginTransaction().Rollback(); } }分别显示图标样式并且如果我想在页面上多次显示相同的图标以便能够分别设置路径样式？如果可能，那怎么样？

无法正确设置使用xlink：href显示的SVG样式

0 个答案: