带有 [attribute= "value" ] 规则的 CSS 不适用于 jquery-svg 图像

Question

我已经用jquery SVG加载了一个inkscape SVG文件，我正在尝试对其应用一堆CSS选择器，以确保特定层的项目都是统一的颜色，并允许在某些层上使用鼠标悬停效果。在SVG上遵守标准CSS规则似乎没有问题，但完全忽略了[attribute="value"]选择器的任何内容，例如：

svg g path:hover {
    fill: yellow !important;
    stroke-width: 4px !important;
}

将在鼠标悬停时应用这些效果，正如预期的那样：

svg g[inkscape:label="footprint"] * {
    fill: white !important;
    pointer-events: none;
}

完全忽略这一点，导致：hover事件仍然适用于它们。我还设置了一个CSS样式，用于将规则应用于图例div和SVG，如下所示：

svg g[inkscape:label="social"] *,
div#legend div.legendEntry[name="social"] div.legendColor {
    fill: orange !important;
    background-color: orange;
}

这将在没有问题的情况下匹配div#legend div.legendEntry[name="social"] div.legendColor，但是似乎不适用于svg g[inkscape:label="social"] *选择器。

我假设这与jquery-svg或jquery在页面加载后更改DOM有关——尽管当我直接将svg数据加载到页面中时，没有jquery-sfg，这不是问题。我可以通过jquery svg直接应用样式，但是在加载svg文件后告诉它应用现有样式会更好。

Answer 1

SVG是一种基于XML的格式，因此，inkscape:label不是名称中包含冒号的inkscape:label属性，而是inkscape XML命名空间中的label属性。

最有可能的是，SVG是作为XML加载的，这意味着您需要在选择器中正确地声明和引用XML命名空间，而不是将冒号视为属性名称的文字部分。您可以在样式表顶部使用@namespace语句：

@namespace inkscape 'http://www.inkscape.org/namespaces/inkscape';

使用[inkscape|label="..."]而不是[inkscape:label="..."]，使用管道而不是转义冒号来指示命名空间前缀：

svg g[inkscape|label="footprint"] * {
    fill: white !important;
    pointer-events: none;
}
svg g[inkscape|label="social"] *,
div#legend div.legendEntry[name="social"] div.legendColor {
    fill: orange !important;
    background-color: orange;
}