通过指定属性而不是元素类型，在svg文件中选择受css影响的元素

Question

我想使用css更改svg文件中某些元素的可见性。

据我所知，您可以通过编写类型来选择要用css修改的形状类型。例如：

<style type="text/css" xml:space="preserve">
    <![CDATA[rect.rectClass {
        stroke: #000066;
        fill: #00cc00;
    }]]>
</style>
<rect x="330" width="100" y="77" height="100" class="rectClass"/>

在此示例中，样式css将应用于元素rect，并应用于所有其他rect。

我想知道是否有办法通过指定中包含的属性 选择来改变，而不是指定元素的类型。例如：

<style type="text/css" xml:space="preserve">
    <![CDATA[rect.layer.layerClass { // Instead of rect, I would like to
        stroke: #000066;             // put the groupType (layer) which is an attribute
        fill: #00cc00;               // of a shape
        visibility: hidden;
    }]]>
</style>
<rect x="330" width="100" y="77" height="100" groupType="layer" class="layerClass"/>

如您所见，元素矩形的属性groupType是“layer”，所以我希望它为我定义的元素“rect.layer.layerClass”应用css类型。

语法很自然是错误的，因为我不知道如何编写它，或者即使可以这样做。

你认为有可能吗？

************************编辑********************** ***
感谢Dekel，答案是：

[groupType=layer].layerClass {
    stroke: #000066;
    fill: #00cc00;
}

现在我想知道如何使用命名空间来做同样的事情。例如：

这是一个完整的例子，它不起作用：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:toto="http://www.toto.com/tata" width="1000"
                height="1000" viewBox="0 0 1000 1000" version="1.0">
    <style type="text/css" xml:space="preserve">
        <![CDATA[[toto:/groupType=layer].layerClass {
            visibility:hidden;
        }]]>
    </style>
    <defs>
    <rect toto:groupType="layer" x="330" width="100" y="77" height="100" class="layerClass"/>
    </svg>

但它没有奏效。有什么想法吗？

Answer 1

您可以使用此选择器：[groupType=layer]

[groupType=layer].layerClass {
  stroke: #000066;
  fill: #00cc00;
}

<svg width="500" height="500">
  <rect x="330" width="100" y="77" height="100" groupType="layer" class="layerClass"/>
</svg>