CSS с правилами [attribute = value], которые не применяются к изображению jquery-svg

У меня есть файл SVG inkscape, загруженный с помощью jquery-svg, к которому я пытаюсь применить кучу селекторов CSS, чтобы гарантировать, что все элементы определенных слоев имеют одинаковый цвет, и чтобы разрешить эффекты наведения курсора мыши на определенные слои. Кажется, у него нет проблем с соблюдением стандартных правил CSS для SVG, но он полностью игнорирует все, что связано с селектором [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.


svg jquery css css-selectors jquery-svg
person Rohaq    schedule 07.04.2015    source источник
comment
Будьте осторожны при наличии внешней таблицы стилей css для svg в качестве встроенного стиля, который устанавливает inkscape, будет переопределять ваши свойства css.   -  person Persijn    schedule 07.04.2015

Ответы (1)


arrow_upward
4
arrow_downward

SVG - это формат на основе XML, и поэтому inkscape:label не является атрибутом inkscape:label с двоеточием как частью его имени, а атрибутом label в пространстве имен inkscape XML.

Скорее всего, 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;
}
person BoltClock    schedule 07.04.2015
comment
Идеально! Это решило проблему! Спасибо! Странно, что до использования jquery-svg он работал нормально! - person Rohaq; 07.04.2015