[英]How can I pass values from a function to SVG tag?
I want to make the header of my application dynamically and modular, so I'm writing a function in Javascript that will color the header (SVG) dynamically, but how can I include SVG into my function (such as: document.getElementByTagName(SVG)
or something?). 我想使应用程序的标头动态且模块化,因此我正在用Javascript编写一个函数,该函数将为标头(SVG)动态着色,但是如何将SVG包含到我的函数中(例如:
document.getElementByTagName(SVG)
或其他?
This is for an webapp, I want to make a function headerStyle(title, pageSVG1, pageSVG2, pageSVG3)
, which will style the header, with the correct SVG formats and colors which are passed into the function. 这是针对
headerStyle(title, pageSVG1, pageSVG2, pageSVG3)
应用程序的,我想制作一个函数headerStyle(title, pageSVG1, pageSVG2, pageSVG3)
,它将使用正确的SVG格式和颜色并将其传递给函数,从而对标题进行样式设置。 For example: headerstyle('Menu', 'FF0000', '000000', 'D3D3D3')
. 例如:
headerstyle('Menu', 'FF0000', '000000', 'D3D3D3')
。 I'm not sure how to begin to set up this function. 我不确定如何开始设置此功能。
<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>
Ìnto the function: to功能:
function headerStyle(title, pageSVG1, pageSVG2, pageSVG3) {
document.getElementByTagName("SVG");
}
I honestly don't know how I'm gonna get it working. 老实说,我不知道该如何运作。 Could you please help or show me an example of how I can achieve this?
您能否提供帮助或向我展示如何实现这一目标的示例? If passed
headerStyle("Menu", "FF00000", "000000", "D3D3D3")
, I want to get the color of the first circle #FF00000
, the second #000000
, but I don't know how I can write a function like that. 如果传递了
headerStyle("Menu", "FF00000", "000000", "D3D3D3")
,我想获取第一个圆圈#FF00000
的颜色,第二个圆圈#000000
,但是我不知道该怎么写这样的功能。 The output is not what it should be. 输出不是应该的。
As I've told you in my comment you need to remove fill="none"
. 正如我在评论中告诉您的那样,您需要删除
fill="none"
。 Then you can write a function to change the style of the SVG element like this. 然后,您可以编写一个函数来像这样更改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>
The OP is commenting: OP在评论:
But what if I want to change the fill of the inside the tag or the fill of the tag inside the tag?
但是,如果我想更改标签内部的填充或标签内部的填充,该怎么办?
In this case you need to select the circle or/and the path and change the fill for those: 在这种情况下,您需要选择圆或/和路径并更改其填充:
let circle = document.querySelector("circle");
circle.setAttribute("style",`fill:${color}`);
You can also change the function to something like: 您还可以将函数更改为以下内容:
function changeStyle(svgElmt,color){svgElmt.setAttribute("style",`fill:${color}`)}
Now you can use the function for the any svg element: 现在,您可以将函数用于任何svg元素:
changeStyle(circle,"red")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.