Reputation: 3898
I have a SVG that I manipulate using JS :
var allElements = svg.getElementsByTagName("*");
for (i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute("v:nameU"))
if (allElements[i].getAttribute("v:nameU") == "idApplication") {
var appGroup = allElements[i].parentNode.parentNode;
var appRect = appGroup.getElementsByTagName("rect");
for (var j = 0; j < appRect.length; j++) {
if (appRect[j].hasAttribute("class"))
if (appRect[j].getAttribute("class").indexOf("bordered") < 0)
appRect[j].setAttribute("class", appRect[j].getAttribute("class") + " bordered");
else
;
else
appRect[j].setAttribute("class", "bordered");
}
}
}
So this way I add the class "bordered"
to all rect
that are in a specific g
.
Then I have some CSS like this :
.bordered:hover {
stroke: #4c8b62;
stroke-width: 2;
cursor: help;
}
So when my cursor is on the specific rect, the borders are highlighted.
The problem is that inside my rect, I have some text zones etc, and when my mouse is over this text zone (which is displayed inside the rectangle), the rectangle border are not changed.
So I want to change the style of those rect when my mouse is on any element of the g
I guess, or any other solution is welcomed.
Also, is there a way to give priority to my own class properties, it looks like property of bootstrap class like .stXX
are overriding my .bordered
properties.
Here is a sample of the svg :
<g id="group418-1038" transform="translate(1975.93,-1388.94)" 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(Référentiel produits de toutes les entités. Sera remplacé)"/>
<v:cp v:nameU="labelEN" v:lbl="labelEN" v:type="0" v:sortKey="4" v:langID="1036"
v:val="VT4(Product referential for all entities. Will be replaced in the future)"/>
<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(Fund)"/>
<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-1039" 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="1627.09" width="113.386" height="56.6929" class="st56"/>
</g>
<g id="shape418-1041" 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="1655.43" width="113.39" height="56.6929"/>
<text x="44.24" y="1636.53" class="st4" v:langID="1036"><v:paragraph v:horizAlign="1"/><v:tabList/>Fund<v:newlineChar/><v:newlineChar/><tspan
x="10.08" dy="2.4em" class="st55">Référentiel produits de toutes les </tspan><tspan x="22.2" dy="1.2em"
class="st55">entités</tspan><tspan
class="st55">. <v:newlineChar/></tspan><tspan x="11.11" dy="1.2em" class="st55">Sera remplacé par MyFund </tspan><tspan
x="37.16" dy="1.2em" class="st55">dans le future</tspan></text> </g>
</g>
Upvotes: 1
Views: 98
Reputation: 3898
Well, I think I managed to make it work by doing as follows :
// Parsing full SVG file elements
var allElements = svg.getElementsByTagName("*");
for (i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute("v:nameU"))
if (allElements[i].getAttribute("v:nameU") == "idApplication") {
var appGroup = allElements[i].parentNode.parentNode;
var appRect = appGroup.getElementsByTagName("rect");
appGroup.setAttribute("class", "appContainer");
for (var j = 0; j < appRect.length; j++) {
if (appRect[j].hasAttribute("class"))
if (appRect[j].getAttribute("class").indexOf("bordered") < 0)
appRect[j].setAttribute("class", appRect[j].getAttribute("class") + " bordered");
else
;
else
appRect[j].setAttribute("class", "bordered");
}
}
}
and for the CSS :
.appContainer:hover .bordered {
stroke: #4c8b62; !important;
stroke-width: 2; !important;
cursor: help; !important;
}
Upvotes: 0
Reputation: 1449
To override bootstraps styles, add !important
after your style, like such:
.selector{
style: value !important;
}
Or you can increase the specificity of your selector, like:
.class tag{
style: value;
}
Which will take precedent over bootstrap's default CSS, assuming it is more specific.
Im having trouble reading your SVG code, but in order for your text zone to trigger a mouseover, I would wrap both elements in a container, and then trigger mousemove on that container element.
Upvotes: 1