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

Question

我想使我的应用程序的标题动态和模块化，所以我正在用 Javascript 编写一个函数，该函数将为标题 (SVG) 动态着色，但我如何将 SVG 包含到我的函数中（例如：@987654321 @ 或者其他的东西？）。

这是一个 web 应用程序，我想创建一个函数 headerStyle(title, pageSVG1, pageSVG2, pageSVG3)，它将设置标题的样式，并使用正确的 SVG 格式和颜色传递给函数。例如：headerstyle('Menu', 'FF0000', '000000', 'D3D3D3')。我不确定如何开始设置此功能。

<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>

进入函数：

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

老实说，我不知道如何让它工作。您能否帮助或向我展示如何实现这一目标的示例？ 如果通过headerStyle("Menu", "FF00000", "000000", "D3D3D3")，我想得到第一个圆圈#FF00000，第二个#000000的颜色，但是不知道怎么写这样的函数。输出不是应该的。

Answer 1

正如我在评论中告诉您的，您需要删除 fill="none"。然后你可以写一个函数来像这样改变SVG元素的样式。

let svg = document.querySelector("svg");

function headerStyle(svg,color){svg.setAttribute("style",`fill:${color}`)}

headerStyle(svg,"gold")

<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>

更新

OP 正在评论：

但是如果我想改变标签内部的填充或者标签内部的填充呢？

在这种情况下，您需要选择圆或/和路径并更改它们的填充：

let circle = document.querySelector("circle");
circle.setAttribute("style",`fill:${color}`);

您还可以将函数更改为：

function changeStyle(svgElmt,color){svgElmt.setAttribute("style",`fill:${color}`)}

现在您可以将函数用于任何 svg 元素：

changeStyle(circle,"red")