Question

我有一个使用JS操作的SVG：

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");
                    }
            }

    }

因此，我将这个类"bordered"添加到特定rect中的所有g。

然后我有一些像这样的CSS：

.bordered:hover {
  stroke: #4c8b62;
  stroke-width: 2;
  cursor: help;
}

因此，当我的光标在特定的矩形上时，边框会突出显示。

问题是在我的rect中，我有一些文本区域等，当我的鼠标位于此文本区域（显示在矩形内）时，矩形边框不会更改。因此，当我的鼠标位于g的任何元素上时，我想改变那些rect的样式，或者欢迎任何其他解决方案。

另外，有没有办法优先考虑我自己的类属性，看起来像.stXX这样的bootstrap类的属性会覆盖我的.bordered属性。

以下是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. &#10;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>

Answer 1

要覆盖bootstraps样式，请在样式后添加<Button android:background="@android:color/transparent" android:text="@+id/Button01" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" />，如下所示：

!important

或者您可以增加选择器的特异性，例如：

.selector{
   style: value !important;
 }

这将优先于bootstrap的默认CSS，假设它更具体。

我无法读取您的SVG代码，但为了让您的文本区域触发鼠标悬停，我会将两个元素都包装在容器中，然后在该容器元素上触发mousemove。

Answer 2

好吧，我认为我设法通过以下方式使其发挥作用：

TCHAR buffer[100];

DWORD start, end;
SendMessage(hEdit, EM_GETSEL, (WPARAM)&start, (LPARAM)&end);

GetWindowText(hEdit, buffer, 100);
TCHAR * otherBuff = new TCHAR[100];
memset(otherBuff, 0, 100 * sizeof *otherBuff);
_tcsncpy(otherBuff, buffer + start, end);

和CSS：

    // 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");
                    }
            }

    }

}

将鼠标悬停在另一个元素上时，将样式应用于元素

2 个答案: