CSS [attribute="value"] 规则不适用于 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 属性，而是 label inkscape XML 命名空间中的属性。

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

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

CSS with [attribute="value"] rules not applying to jquery-svg image

css

jquery

svg

css-selectors

jquery-svg