Как заставить все элементы в группах svg менять цвет по клику (js) - PullRequest
Новая
       35

Как заставить все элементы в группах svg менять цвет по клику (js)

0 голосов
/ 15 мая 2019

Я хочу изменить заливку (onclick) всех элементов в группе из SVG-файла.На данный момент я использую JavaScript, чтобы установить атрибут для идентификатора.Кажется, это только меняет один из элементов.

Я попытался встроить svg с помощью onclick.это не похоже на работу.Итак, я начал с JavaScript.Теперь он заполняет только один треугольник, а я устанавливаю функцию для вызова из группы. 

function callred(){
  document.getElementById('btn1').setAttribute('fill', '#ff00ff');
}
#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
	<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 	"/>
	<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 	"/>
	<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 	"/>
	<polygon points="366.699,581 410,656 453.301,581 	"/>
</g>


</svg>

Я ожидаю, что все элементы в группе изменят свой цвет на другой при нажатии на любой элемент группы, и они останутся в этом цвете.

Ответы [ 4 ]

2 голосов
/ 15 мая 2019

Это работает 

function callred() {

 [...document.getElementById('btn1').querySelectorAll('*')].forEach((e) => {
    e.setAttribute('fill', '#ff00ff');
  });
}
#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
	<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 	"/>
	<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 	"/>
	<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 	"/>
	<polygon points="366.699,581 410,656 453.301,581 	"/>
</g>


</svg>

не уверен, что это хороший ответ

Вы также можете использовать CSS 

function callred() {
 document.getElementById('btn1').classList.toggle("forcecolor");
}
.forcecolor * {
  fill: blue;
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
	<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 	"/>
	<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 	"/>
	<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 	"/>
	<polygon points="366.699,581 410,656 453.301,581 	"/>
</g>


</svg>
1 голос
/ 15 мая 2019

Хотя то, что вы делаете, правильно, вы пытаетесь применить заливку к группе, а не к элементам внутри нее - просто циклически просматривая элементы внутри svg, по которому щелкнули, вы сможете заполнить их одинаковым цветом. Я использовал цикл for для поддержки браузера.

Также стоит отметить, что после щелчка он не будет отображаться до тех пор, пока вы не переместите указатель мыши с элемента, потому что, несмотря на то, что вы устанавливаете заливку, в вашем css все еще установлено свойство hover. 

function callred(){
    const children = document.getElementById('btn1').children;
  for(let i = 0; i < children.length; i++ ){
    children[i].setAttribute('fill','#ff00ff');
  }
}
g:hover > polygon{
    fill: yellow;
}
b:hover > polygon{
    fill: yellow;
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
	<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 	"/>
	<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 	"/>
	<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 	"/>
	<polygon points="366.699,581 410,656 453.301,581 	"/>
</g>


</svg>
0 голосов
/ 15 мая 2019

Лично я бы, наверное, просто переключил класс CSS, чтобы поразить детей; 

function callred(){
   document.getElementById("btn1").classList.toggle("new-style");
}
#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

.new-style polygon {
  fill: red!important;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
	<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 	"/>
	<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 	"/>
	<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 	"/>
	<polygon points="366.699,581 410,656 453.301,581 	"/>
</g>


</svg>
0 голосов
/ 15 мая 2019

Используйте document.getElementsByTagName('polygon'), чтобы получить все полигоны, а затем зациклите их, устанавливая заливку каждого из них: 

function callred(){
var els = document.getElementsByTagName('polygon')
  for (var i=0; i < els.length; i++) {
      els[i].setAttribute('fill', '#ff00ff');
  }
}
#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
	<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 	"/>
	<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 	"/>
	<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 	"/>
	<polygon points="366.699,581 410,656 453.301,581 	"/>
</g>


</svg>
...