Селектор пространства имен атрибутов CSS в SVG

Я пытаюсь использовать следующий CSS для автоматической установки стиля для <g> элементов.

<style type="text/css">
    g[inkscape|label="Site"] {
        fill: blue;
        stroke: red;
        stroke-width: 3
        }
    g[inkscape|label="Building"] {
        fill: black;
        stroke: red;
        stroke-width: 3
        }
</style>

Однако элементы остаются без установленных настроек заливки или обводки.

Выбор другого атрибута без пространства имен работает нормально.

Спасибо.


svg css inkscape
person peter    schedule 24.06.2014    source источник
comment
Не могли бы вы предоставить небольшой jsfiddle в качестве примера для игры?   -  person Delapouite    schedule 24.06.2014
comment
Я написал комментарий к ответу @Alohci. Проблема в inkscape, а не в самом svg.   -  person peter    schedule 25.06.2014

Ответы (3)


arrow_upward
4
arrow_downward

Это зависит от контекста вопроса. Является ли SVG автономным файлом, встроенным в файл xhtml (т. е. обслуживаемым как application/xhtml+xml) или встроенным в html-файл (т. е. обслуживаемым как text/html)

Если это автономный SVG, вы можете сделать

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style>
  @namespace inkscape "http://www.inkscape.org/namespaces";

  g[inkscape|label="Site"] { fill: green; }
  </style>
  <g inkscape:label="Site" xmlns:inkscape="http://www.inkscape.org/namespaces">
    <rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" />
  </g>
</svg>

См. http://alohci.net/static/svg_ns.svg.

Если это файл XHTML, вы можете сделать

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
@namespace inkscape "http://www.inkscape.org/namespaces";

g[inkscape|label="Site"] { fill: blue; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g inkscape:label="Site" xmlns:inkscape="http://www.inkscape.org/namespaces">
    <rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" />
  </g>
</svg>
</body>
</html>

См. http://alohci.net/static/svg_ns.xhtml.

Если он находится в файле html, это немного отличается, потому что анализатор html не поддерживает пользовательские пространства имен. Вместо этого вы должны обращаться с именем атрибута, как если бы это было обычное имя с двоеточием в нем. Так что ты бы сделал

<!DOCTYPE html>
<html>
<head>
<style>
g[inkscape\:label="Site"] { fill: yellow; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g inkscape:label="Site" xmlns:inkscape="http://www.inkscape.org/namespaces">
    <rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" />
  </g>
</svg>
</body>
</html>

См. http://alohci.net/static/svg_ns.html.

person Alohci    schedule 24.06.2014
comment
Я добавил тег стиля как дочерний элемент тега defs. Файл не будет встроен ни в один html. Только автономное использование в Inkscape. - person peter; 25.06.2014
comment
Я попытался открыть ваш файл svg в inkscape, но раскраска не работает (работает в Firefox). Кажется, проблема в inkscape, а не в svg. Большое спасибо. - person peter; 25.06.2014

arrow_upward
2
arrow_downward

Небольшое дополнение к ответу @alohci: в некоторых браузерах имена атрибутов, используемые в CSS, должны быть строчными. См. следующий пример, где линия оранжевого цвета, но не имеет ширины 10 пикселей в Firefox 33 и IE 11. Google Chrome 39 рисует ее шириной 10 пикселей.

<!DOCTYPE html>
<html>
<head>
    <style>
        /** Works **/
        path[cwl\:feedtype="hello"] {
            stroke: #fa0;
        }

        /** Does not work always; attribute name must be lowercase */
        /** (names are case insensitive) */
        path[cwl\:feedType="hello"] {
            stroke-width: 10;
        }
    </style>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:cwl="http://www.example.com/2014/cwl">
    <path d="M0 0 L100 100" cwl:feedType="hello"/>
</svg>

</body>
</html>
person Simon A. Eugster    schedule 19.11.2014

arrow_upward
0
arrow_downward

Небольшое обновление ответа @Alhoci (2019 г.). Соответствующее пространство имен для Inkscape SVG как XHTHML изменилось с

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

to

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

(ps. Для других людей, использующих SVGInject или другие способы динамической загрузки SVG, используйте второй ответ @Alhoci для XHTML с обновленным пространством имен!)

person doug    schedule 10.11.2019