CSS attribute namespace selector in SVG

css namespace
css namespace w3schools
css namespace best practices
css selectors
xml namespace
svg path css
svg css
css selector contains

I'm trying to use the following CSS to automatically set the style for <g> Elements.

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

However the elements remain without fill or stroke settings set.

Selecting another attribute without a namespace works fine.

Thank you.

This depends what the context of the question is. Is the SVG a stand-alone file, embedded in an xhtml file (i.e. served as application/xhtml+xml) or embedded in an html file (i.e. served as text/html)

If it's standalone SVG, you can do

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

See http://alohci.net/static/svg_ns.svg

If it's in an XHTML file, you can do

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

See http://alohci.net/static/svg_ns.xhtml

If it's in an html file, it's a little different because the html parser doesn't support custom namespaces. Instead you have to treat the attribute's name as if it was just a normal name with a colon in it. So you'd do

<!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>

See http://alohci.net/static/svg_ns.html

XML Namespaces in CSS — Using SVG with CSS3 and HTML5 , You can use namespaced attribute selectors to select custom attributes added by your graphics software, such as layer names. But, remember: The CSS� @namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet. The defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace. The @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML5 with inline SVG or MathML, or XML that mixes

Small addition to @alohci’s answer: The attribute names used in CSS must be all lowercase in some browsers. See the following example where the line is orange but not 10 px wide in Firefox 33 and IE 11. Google Chrome 39 does paint it 10 px wide.

<!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>

@namespace, I'm trying to use the following CSS to automatically set the style for <g> Elements. <style type="text/css"> g[inkscape|label="Site"] { fill: blue; stroke: red;� To select an element tag or attribute defined in a specific namespace, you declare a namespace prefix with an @namespace rule, then use it in your selector. The namespace is separated from the tag name with a | (vertical bar or pipe) character; if there is no tag name in the selector, use a universal * selector:

Small update to @Alhoci's answer (2019). The relevant namespace for Inkscape SVG as XHTHML has changed from

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

to

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

(p.s. For other people using SVGInject or other ways of dynamically loading SVGs, use @Alhoci's second answer for XHTML with the updated namespace!)

CSS attribute namespace selector in SVG - css - html, SVG user agents must support all of the CSS styling mechanisms described in this an element in the HTML namespace with local name "link") with its 'rel' attribute outline property) and the ::selection pseudo-element (using an appropriate� The @namespace rule can also be used to define a namespace prefix. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace and name of the element or attribute matches. In HTML5, known foreign elements will be automatically be assigned namespaces.

Styling — SVG 2, This CSS Namespaces module defines the syntax for using namespaces in CSS. The second rule declares a namespace prefix svg that is used to applies to type selectors—but it does not apply to attribute selectors. The :lang(code) selector in CSS will select elements with a specified language, regardless of whether they have the attribute directly or inherit the language of their parent. xml:space # SVG 1 attribute that was supposed to control whether whitespace in the markup gets collapsed for text rendering.

CSS Namespaces Module Level 3, The @namespace CSS at-rule declares a namespace prefix and associates XHTML and SVG) may contain the same element or attribute names. The svg|a selector above matches the anchor tags in the SVG namespace� XML Namespaces - The xmlns Attribute. When using prefixes in XML, a namespace for the prefix must be defined. The namespace can be defined by an xmlns attribute in the start tag of an element. The namespace declaration has the following syntax. xmlns:prefix="URI".

@namespace, This prefix is used to apply the namespace http://www.w3.org/2000/svg where the When a universal, type, or attribute selector is prefixed with a namespace� altGlyph. For <altGlyph>, xlink:href defines the reference either to a <glyph> element in an SVG document fragment or to an <altGlyphDef> element. If the reference is to a <glyph> element and that glyph is available, then that glyph is rendered instead of the characters that are inside of the <altGlyph> element.

Comments
  • Could you provide a small jsfiddle as an example to play with?
  • I wrote a comment to the answer of @Alohci . The problem is inkscape not the svg itself.
  • I added the style tag as a child of the defs tag. The file will not be embedded in any html. Only standalone use in Inkscape.
  • I tried your to open your svg file in inkscape and the coloring is not working (it works in Firefox). It seems that the problem is inkscape not the svg. Thank you very much.