SVG 中特定矩形的 CSS 选择器

Question

我正在尝试从 SVG 中选择所有遵循某种模式的元素来更改这些元素的光标：

这是一个代码示例：

<g id="group418-1085" transform="translate(1975.93,-1403.11)" v:mID="418" v:groupContext="group">
        <v:custProps>
            <v:cp v:nameU="idApplication" v:lbl="idApplication" v:type="0" v:sortKey="1" v:langID="1036" v:val="VT4(216)"/>
            <v:cp v:nameU="labelFR" v:lbl="labelFR" v:type="0" v:sortKey="3" v:langID="1036"
                    v:val="VT4(Product Ref)"/>
            <v:cp v:nameU="labelEN" v:lbl="labelEN" v:type="0" v:sortKey="4" v:langID="1036"
                    v:val="VT4(Product entity)"/>
            <v:cp v:nameU="color" v:lbl="color" v:type="0" v:sortKey="99" v:langID="1036" v:val="VT4()"/>
            <v:cp v:nameU="type" v:lbl="type" v:type="0" v:sortKey="5" v:langID="1036" v:val="VT4(Business)"/>
            <v:cp v:nameU="name" v:lbl="name" v:type="0" v:sortKey="2" v:langID="1036" v:val="VT4(FundLife)"/>
            <v:cp v:nameU="External" v:lbl="External" v:type="0" v:langID="1036" v:val="VT4(FALSE)"/>
            <v:cp v:nameU="appLevel" v:lbl="appLevel" v:type="0" v:langID="1036" v:val="VT4(2)"/>
            <v:cp v:nameU="_VisDM_status" v:lbl="status" v:type="2" v:langID="1036" v:val="VT0(1):26"/>
        </v:custProps>
        <v:userDefs>
            <v:ud v:nameU="msvStructureType" v:prompt="" v:val="VT4(Container)"/>
            <v:ud v:nameU="msvSDContainerMargin" v:prompt="" v:val="VT0(0.078740157480315):24"/>
            <v:ud v:nameU="Label" v:prompt="" v:val="VT0(2):26"/>
            <v:ud v:nameU="ShapeVersion" v:prompt="" v:val="VT0(1):26"/>
            <v:ud v:nameU="LightColorText" v:prompt="" v:val="VT0(0):5"/>
            <v:ud v:nameU="TechnicalVue" v:prompt="" v:val="VT0(0):5"/>
            <v:ud v:nameU="MainColor" v:prompt="" v:val="VT4(RGB(213;213;213))"/>
        </v:userDefs>
        <title>Application.51</title>
        <g id="shape419-1086" v:mID="419" v:groupContext="shape">
            <title>Feuille.419</title>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(14):26"/>
            </v:userDefs>
            <rect x="0" y="1641.26" width="113.386" height="42.5197" class="st56"/>
        </g>
        <g id="shape418-1088" v:mID="418" v:groupContext="groupContent">
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="56.6929" cy="1662.52" width="113.39" height="42.5197"/>
            <text x="44.24" y="1652.02" class="st4" v:langID="1036"><v:paragraph v:horizAlign="1"/><v:tabList/>FundLife<v:newlineChar/><v:newlineChar/><tspan
                        x="6.06" dy="2.4em" class="st55">Product referential for all entities of </tspan><tspan x="36.1"
                        dy="1.2em" class="st55">Owner</tspan></text>            </g>
    </g>

所以我要选择的是rect。

我要选择的rect始终是g 的子代，g 的子代具有v:nameU 属性和值为idApplication 的后代。

（这个后代始终是v:custoProps 的g 的子代的v:cp 子代，就像上面的代码一样，但我认为没有必要使用它。）

所以我在想：

g v:cp[v:nameU="idApplication"] > g > rect {cursor: help;}

但这不起作用。

Answer 1

作为rect 元素的父元素的g 元素是包含相关v:cp 元素的v:custProps 元素的以下兄弟：

<v:custProps>
    <v:cp v:nameU="idApplication" v:lbl="idApplication" v:type="0" v:sortKey="1" v:langID="1036" v:val="VT4(216)"/>
    <!-- ... -->
</v:custProps>
<!-- ... -->
<g id="shape419-1086" v:mID="419" v:groupContext="shape">
    <rect x="0" y="1641.26" width="113.386" height="42.5197" class="st56"/>
</g>

由于v:cp 元素是v:custProps 的子元素，因此可以像这样分别表示v:cp 和rect 元素：

@namespace v 'http://schemas.microsoft.com/visio/2003/SVGExtensions/';

g[id="group418-1085"] > v|custProps > v|cp[v|nameU="idApplication"] { /* ... */ }
g[id="group418-1085"] > v|custProps ~ g > rect { /* ... */ }

不可能基于单个选择器中的 v:cp 元素来定位 rect 元素。此外，组合器是线性的，一次只接受两个复合选择器，you can't change this，因此无法将上述两个选择器合二为一。

（另外，要在选择器中表示命名空间元素和属性，您需要声明命名空间前缀并使用如上所示的适当语法，但这是一个附带问题，在这里修复它不会有太大用处。）