新手上路，请多包涵

更新： 是的，我知道在 SO 上也有类似的问题，但解决方案也不起作用。

我想改变 SVG 的颜色，我的意思是路径的颜色，不是“内部”的颜色，而是路径本身。

我首先尝试使用 css，它根本不起作用。然后用js，它几乎可以工作：

这有效，也就是说，加载了图像。默认情况下它是黑色的。

 <object id = 'test' data="images/icons/040__file_delete.svg" type="image/svg+xml"></object>

我想把它改成绿色。

     <script>
        $(function(){
            document.getElementById("test").addEventListener("load", function() {
                var doc = this.getSVGDocument();
                console.log(doc);//works fine
                var p = doc.querySelector("path"); //works
                p.setAttribute("stroke", "green");
            });
        })
    </script>

以上确实“有效”，但在路径中添加了“边框”。我还尝试了“颜色”、“填充颜色”、“填充”——没有任何效果。

更新二： SVG 的来源：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="图层_1" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#231815;}
</style>
<g>
    <g>
        <g>
            <g>
                <g>
                    <path class="st0" d="M13,17.5H5c-1.4,0-2.5-1.1-2.5-2.5V3c0-1.4,1.1-2.5,2.5-2.5h3.6c0.4,0,0.8,0.2,1.1,0.4l5.4,5.4       c0.3,0.3,0.4,0.7,0.4,1.1V15C15.5,16.4,14.4,17.5,13,17.5z M5,1.5C4.2,1.5,3.5,2.2,3.5,3v12c0,0.8,0.7,1.5,1.5,1.5h8       c0.8,0,1.5-0.7,1.5-1.5V7.4c0-0.1-0.1-0.3-0.1-0.4L8.9,1.6C8.8,1.6,8.7,1.5,8.6,1.5H5z" fill="green"/>
                </g>
                <g>
                    <path class="st0" d="M15,7.5h-4C9.6,7.5,8.5,6.4,8.5,5V1c0-0.3,0.2-0.5,0.5-0.5S9.5,0.7,9.5,1v4c0,0.8,0.7,1.5,1.5,1.5h4       c0.3,0,0.5,0.2,0.5,0.5S15.3,7.5,15,7.5z"/>
                </g>
            </g>
            <g>
                <g>
                    <path class="st0" d="M10.5,13.9c-0.1,0-0.3,0-0.4-0.1l-3-3C7,10.5,7,10.2,7.1,10s0.5-0.2,0.7,0l3,3c0.2,0.2,0.2,0.5,0,0.7       C10.8,13.8,10.6,13.9,10.5,13.9z"/>
                </g>
                <g>
                    <path class="st0" d="M7.5,13.9c-0.1,0-0.3,0-0.4-0.1C7,13.5,7,13.2,7.1,13l3-3c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7l-3,3       C7.8,13.8,7.6,13.9,7.5,13.9z"/>
                </g>
            </g>
        </g>
    </g>
</g>
</svg>

原文由 konrad_firm 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript svg

阅读 2.3k

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

fill 和/或 stroke 路径上的属性不会覆盖 CSS 样式（这就是原因）。

您需要做的是覆盖 CSS 样式本身，这可以通过设置 style 属性来完成，例如

<path style="fill:green" ...>

或者在javascript中

element.setAttribute('style', 'fill: green');

在您对我的评论的回复中，您提到您将解决“单一路径”问题，以便为此提供一个示例，这就是解决它的原因和方法。

querySelector 方法只提供匹配的第一个元素（如果有的话），你想使用 querySelectorAll 方法，它将提供一个包含所有匹配元素的NodeList。

 var paths = doc.querySelectorAll("path"),
    i;

for (i = 0; i < paths.length: ++i) {
    paths[i].setAttribute('style', 'fill:green');
}

正如我在评论中提到的， getSVGDocument() 方法可能并不存在于您需要支持的所有浏览器上（我对您的要求一无所知，这只是一个提醒），您可能对 .contentDocument 此处描述的属性

原文由 Rogier Spieker 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-12

根据接受的答案，我创建了示例来单击按钮并更改颜色路径。

重要的事情：

我需要将 HTML 文件托管到网络服务器 (IIS) 才能运行它。如果不是它 a.contentDocument 总是返回null。

我为谁而分享。

         var svgDoc;
        function changeColor() {
            svgDoc = a.contentDocument;
            // get the inner element by id
            var paths = svgDoc.querySelectorAll("path");
            // add behaviour
            for (i = 0; i < paths.length; i++) {
                paths[i].setAttribute('style', 'fill:pink');
            }
        }

        var a = document.getElementById("alphasvg");

        // It's important to add an load event listener to the object,
        // as it will load the svg doc asynchronously
        a.addEventListener("load", function () {

            // get the inner DOM of alpha.svg
            svgDoc = a.contentDocument;
            // get the inner element by id
            var paths = svgDoc.querySelectorAll("path");
            // add behaviour
            for (i = 0; i < paths.length; i++) {
                paths[i].setAttribute('style', 'fill:green');
            }

        }, false);

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <object data="test.svg" type="image/svg+xml" id="alphasvg"></object>

    <button onclick="changeColor()">Change Color</button>

    <script>

    </script>
</body>

</html>

原文由 Hien Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何更改 SVG 的路径颜色？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译