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

Question

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

我知道你可以通过写 type 来选择你想用 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;
}

现在我想知道如何对 namespace 执行相同的操作。例如:

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

<?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>