html - 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 的 child ，而 g 是另一个 g 的 child ，后者的后代为 v:nameU 属性值为 idApplication。

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

所以我在想:

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

但这行不通。

Answer 1

作为 rect 元素父元素的 g 元素是包含 的 v:custProps 元素的后续兄弟元素v:cp 有问题的元素:

<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 , 所以不可能把上面两个选择器合二为一。

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