Селектор пространства имен атрибутов 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>

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

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

Спасибо.

Источник

2 ответа

Решение

Это зависит от контекста вопроса. Является ли 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

Источник

Небольшое дополнение к ответу @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>
Источник

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

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

к

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

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

Источник
Другие вопросы по тегам