Question

我正在尝试使用以下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>

但是元素仍未设置填充或描边设置。

选择没有命名空间的其他属性可以正常工作。

谢谢。

Answer 1

这取决于问题的背景。 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

Answer 2

@ alohci答案的小补充：在某些浏览器中，CSS中使用的属性名称必须全部小写。请参阅以下示例，其中该行为橙色，但在Firefox 33和IE 11中不是10像素宽。谷歌浏览器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>

Answer 3

@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的第二个答案以及更新的名称空间！）

SVG中的CSS属性命名空间选择器

3 个答案: