Javascript 如何将值从函数传递到SVG标记？

我想使我的应用程序的标题动态且模块化，因此我正在用Javascript编写一个函数，该函数将动态地为标题（SVG）着色，但如何将SVG包含到我的函数中（例如：

document.getElementByTagName（SVG）

或其他什么？）

这是一个webapp，我想制作一个函数

headerStyle（title，pageSVG1，pageSVG2，pageSVG3）

，它将使用传递到函数中的正确SVG格式和颜色设置标题样式。例如：

headerstyle（'Menu'，'FF0000'，'000000'，'d3d3'）

。我不确定如何开始设置此功能

<svg width="100%" height="262" viewBox="0 0 375 262" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="188" cy="-803" r="1065" fill="FF0000"/>
        <path d="M1046.5 -839.5C1046.5 -251.317 569.683 225.5 -18.5 225.5C-606.683 225.5 -1083.5 -251.317 -1083.5 -839.5C-1083.5 -1427.68 -606.683 -1904.5 -18.5 -1904.5C569.683 -1904.5 1046.5 -1427.68 1046.5 -839.5Z" fill="000000"/>
        <path d="M652 -635.5C652 -156.393 263.607 232 -215.5 232C-694.607 232 -1083 -156.393 -1083 -635.5C-1083 -1114.61 -694.607 -1503 -215.5 -1503C263.607 -1503 652 -1114.61 652 -635.5Z" fill="D3D3D3"/>
        <text id="page-title" style="fill: white; font-size: 28px; font-family: 'Lato', sans-serif; font-weight: 700; padding: 50px;" x="50" y="120">Menu</text>
    </g>
</svg>

我真的不知道怎么才能让它工作。你能帮我一下吗？或者给我举个例子，说明我是如何做到这一点的？

---

如果通过

标题样式（“Menu”，“FF00000”，“000000”，“d3d3”）

，我想得到第一个圆圈

#FF00000

，第二个圆圈

#000000

，但我不知道如何编写这样的函数。输出不是应该的。

正如我在评论中告诉您的，您需要删除

fill=“none”

。然后您可以编写一个函数来更改SVG元素的样式，如下所示

let svg=document.querySelector（“svg”）；
函数headerStyle（svg，color）{svg.setAttribute（“style”，填充：${color}`）}
headerStyle（svg，“黄金”）

菜单

您必须删除

fill=“none”

，如果您需要一个函数来更改颜色，您可以这样做：

函数headerStyle（svg，color）{svg.setAttribute（“style”，

fill:${color}

）}

我希望标记中的元素被着色，等等。我怎样才能做到这一点？谢谢你的回答！但是，如果我想改变标签内部的填充或标签内部的填充，该怎么办？现在，我明白了！我如何使用querySelector将这两个元素作为目标，因为它们具有相同的类型？如果需要将两个路径元素作为目标，可以使用

function headerStyle(title, pageSVG1, pageSVG2, pageSVG3) {
    document.getElementByTagName("SVG");
}