Question

在后端，正在生成以下图形：

<svg width="911.4" height="300">
     <g transform="translate(40,20)">
     <g>
     <g fill="#6d6e71">
     <rect x="1" y="180" height="0" width="62"></rect>
     <rect x="66" y="180" height="0" width="62"></rect>
     <rect x="131" y="180" height="0" width="62"></rect>
     <rect x="196" y="180" height="0" width="62"></rect>
     <rect x="261" y="180" height="0" width="62"></rect>
     <rect x="326" y="159" height="21" width="62" fill="#6d6e71"></rect>
     <rect x="391" y="180" height="0" width="62"></rect>
     <rect x="456" y="180" height="0" width="62"></rect>
     <rect x="521" y="180" height="0" width="62"></rect>
     <rect x="586" y="161" height="19" width="62"></rect>
     <rect x="651" y="180" height="0" width="62"></rect>
     <rect x="716" y="166" height="14" width="62"></rect>
     <rect x="781" y="180" height="0" width="62"></rect>
     </g>
     </g>
     </svg>

有没有一种方法可以仅使用JavaScript来更改前端中的fill="#6d6e71"值？

Answer 1

使用//find first element with "someAttr" attribute document.querySelector('[someAttr]')可以更改填充。参见W3School

使用

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]')

或

var elment = document.querySelector('[fill]');
elment.setAttribute("fill", "#ff0000");

var rect = document.querySelector('svg g rect[fill]')

rect.setAttribute("fill", "#ffff00");

查找具有特定属性的元素。

See SO-Question

<svg width="911.4" height="300">
     <g transform="translate(40,20)">
     <g>
     <g fill="#6d6e71">
     <rect x="1" y="180" height="0" width="62"></rect>
     <rect x="66" y="180" height="0" width="62"></rect>
     <rect x="131" y="180" height="0" width="62"></rect>
     <rect x="196" y="180" height="0" width="62"></rect>
     <rect x="261" y="180" height="0" width="62"></rect>
     <rect x="326" y="159" height="21" width="62" fill="#6d6e71"></rect>
     <rect x="391" y="180" height="0" width="62"></rect>
     <rect x="456" y="180" height="0" width="62"></rect>
     <rect x="521" y="180" height="0" width="62"></rect>
     <rect x="586" y="161" height="19" width="62"></rect>
     <rect x="651" y="180" height="0" width="62"></rect>
     <rect x="716" y="166" height="14" width="62"></rect>
     <rect x="781" y="180" height="0" width="62"></rect>
     </g>
     </g>
     </svg>

<button onclick="Emit">Press me</button>
@functions(){
[Parameter] protected Action<string> Pressed {get;set;}

public void Emit()
{
  Pressed?.Invoke("Some String");
}
}

Answer 2

两个填充元素都可以更改。您需要选择它并更改“ fill”属性，如下所示：

更改全局“填充”属性：

var elment = document.querySelector('svg g');
elment.setAttribute("fill",[color]);

更改内部“矩形”元素的“填充”属性：

var elment = document.querySelector('svg g rect[fill]');
elment.setAttribute("fill",[color]);

[颜色]需要大于颜色值，例如：＃123456 还有其他元素需要更改填充位置吗？如果可能的话，jQuery可以有用地使用$ .each来根据需要更改元素的“ fill”属性。

Answer 3

是的，<g>标签可以接收id或class属性...您必须使用js进行更改。

样品：。

.blue {
    fill: blue;
}
.green {
    fill: green;
}

然后
<g class="blue" id="my-path">

您使用js将class的{{1}}更改为<g>。
green document.getElementById('my-path').classList.remove('blue')

是否可以使用javascript更改svg图表的填充颜色？

3 个答案: