Как передать значения из функции в тег SVG?

Question

Я хочу сделать заголовок моего приложения динамически и модульным, поэтому я пишу функцию в Javascript, которая будет динамически окрашивать заголовок (SVG), но как я могу включить SVG в свою функцию (например: document.getElementByTagName(SVG) или что-то?).

Это для веб-приложения, я хочу сделать функцию 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>

UPDATE

ОП комментирует:

Но что, если я захочу изменить заполнение внутри тега или заполнение тега внутри тега?

В этом случае вам нужно выбрать круг или / и путь и изменить заливку для них:

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

Вы также можете изменить функцию на что-то вроде:

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

Теперь вы можете использовать функцию для любого элемента SVG:

changeStyle(circle,"red")