Question

我想更改以下元素的样式：

http(s)://<localhost:7071 or azurefunchost>/<routePrefix defined in host.json, default is api>/<function name>?uri=<uri defined in app.route, like / or /hi or /hello, even /hello/peter-pan?name=peter>

完整的svg代码：

<path d="M0 573.96 L0 595.28 L64.96 595.28 L64.96 573.96 L0 573.96 L0 573.96 Z" class="st8"/>

我仅设法更改了文本的笔触，但没有更改背景色。简单地设置fill不会产生任何效果，因此我想删除st8类，但得到消息路径。removeAttribute不是函数。

<g id="shape487-256" v:mID="487" v:groupContext="shape" transform="translate(707.533,-425.236)">
            <title>Sheet.487</title>
            <desc>Claims Management</desc>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="32.478" cy="584.619" width="64.96" height="21.314"/>
            <path d="M0 573.96 L0 595.28 L64.96 595.28 L64.96 573.96 L0 573.96 L0 573.96 Z" class="st8"/>
            <text x="21.21" y="582.22" class="st9" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>Claims <tspan
                        x="9.92" dy="1.2em" class="st10">Management</tspan></text>      </g>

Answer 1

要删除一个类，请使用：

paths.classList.remove("st8");

它不会删除属性，但是我猜在这种情况下没关系。

Answer 2

我设法通过选择正确的子元素来更改背景颜色，高度赞赏的更优雅的解决方案。

function highlightTrend01(){
    //Claims Management
    var e = document.getElementById("shape487-256");
    // e.setAttribute("stroke","blue"); setting stroke works
    var children = e.children;
    for (var i = 0; i < children.length; i++) {
        var c = children[i];
        // console.log(c);
        // var cId = c.getAttribute("id");
        var attrClass = c.getAttribute("class");
        if (c.tagName == "path" && attrClass == "st8"){
            console.log("Tag name: " + c.tagName +  " class: " + attrClass);
            // c.removeAttribute("class");
            c.style["fill"] = "orange"
        }
    }

}

Javascript更改SVG路径元素的背景颜色

2 个答案: