具有 [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-svg。我可以通过 jquery-svg 直接应用样式，但是如果能够告诉它在加载 SVG 文件后应用现有样式会更好。

Answer 1

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

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

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

而不是[inkscape\:label="..."]，使用[inkscape|label="..."]，用竖线而不是转义冒号表示namespace prefix：

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;
}