我正在尝试使用以下 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是一个独立的文件，嵌入在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