SVG中的CSS属性命名空间选择器 [英] CSS attribute namespace selector in SVG
问题描述
我尝试使用以下CSS自动设置< g> 元素的样式。
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.
谢谢。
推荐答案
这取决于问题的上下文。 SVG是一个独立的文件，嵌入在xhtml文件中（即作为 application / xhtml + xml ）或嵌入在html文件中（即作为 text / html ）
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)
如果是独立SVG，可以执行
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>
查看 http://alohci.net/static/svg_ns.svg
如果它在XHTML文件中，您可以执行
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>
查看 http://alohci.net/static/svg_ns.xhtml
如果它在html文件中，它有点不同，因为html解析器不支持自定义命名空间。相反，您必须将属性的名称视为它只是一个带冒号的正常名称。所以你可以
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>
查看 http://alohci.net/static/svg_ns.html
这篇关于SVG中的CSS属性命名空间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
