CSS selector for specific rect in a SVG

Question

I'm trying to select all element from a SVG that follows a pattern to change the cursor for those elements :

Here is a code sample :

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

So what I'm trying to select is the rect.

The rectI wanna select are always children of a g that is a child of another g that has a descendant with a v:nameU attribute with the value idApplication.

(This descendant is always a v:cp child of a v:custoProps child of the g like in the code above, but I dont think it's necessary to use this.)

So I was thinking of :

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

But this is not working.

As far as I can see (in your code) there is never a `g` child for `idApplication` — Eun, Apr 27 '15 at 15:43
You mean that `v:cp[v:nameU="idApplication"] > g` is calculated before `g v:cp[v:nameU="idApplication"]` If so how can I set the priority to `g v:cp[v:nameU="idApplication"]` selector ? — Ellone, Apr 27 '15 at 15:53

score 1 · Answer 1 · edited May 23 '17 at 12:14

The g element that is the parent of the rect element is a following sibling of the v:custProps element containing the v:cp element in question:

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

Since the v:cp element is a child of the v:custProps, while it is possible to represent the v:cp and rect elements separately like so:

@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 { /* ... */ }

It is not possible to target the rect element based on that v:cp element in a single selector. Furthermore, combinators are linear and only accept two compound selectors at a time, and you can't change this, so it is not possible to combine the above two selectors into one.

(Also, to represent namespaced elements and attributes in selectors, you need to declare a namespace prefix and use the appropriate syntax as shown above, but that's a side issue and fixing it won't be of much use here.)

So it is not possible to do it this way ? In that case is there a way to select every `rect`, children of a `g` directly following a `title` containing Application in its value ? I don't know if we can parse the content of a tag or how to achieve this — Ellone, Apr 27 '15 at 16:18
@Ellone: You can't do that either, I'm afraid. I can't think of any other solutions. — BoltClock, Apr 27 '15 at 16:19
I guess I will have to use javascript to set a class attribute to the matching elements somehow — Ellone, Apr 27 '15 at 16:33

CSS selector for specific rect in a SVG

1 Answers1