CSS attribute namespace selector in SVG

问题

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.

回答1:

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

回答2:

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>

回答3:

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

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

来源：https://stackoverflow.com/questions/24390558/css-attribute-namespace-selector-in-svg

标签

css

svg

inkscape