Форум

Dan_net · #1 (**permalink**) 04.03.2018, 00:59

Необходимо, что бы при клике на кнопки происходило переключение цветов.

рони · #2 (**permalink**) 04.03.2018, 01:28

Dan_net,
ваши попытки где?

j0hnik · #3 (**permalink**) 04.03.2018, 08:16

цвет какого элемента хотябы.

Dan_net · #4 (**permalink**) 04.03.2018, 12:12

<div id="changeColor">
<input type="button" id="red" value="Red">
<input type="button" id="blue" value="Blue">
<input type="button" id="green" value="Green">
</div>

<figure id="imapc">
<object data="test_1.svg" type="image/svg+xml" id="imap">
</object>
<figcaption>SVG-рисунок</figcaption>
</figure>

$(window).on('load', function () {
var svgobject = document.getElementById('imap');
if ('contentDocument' in svgobject)
var svgdom = svgobject.contentDocument;

$('#changeColor input[type=button]').click(function (e) {
var row = $(this).parent();
var className = row.attr("id");
var idClicked = e.target.id;
$("."+className, svgdom).myAddClass(idClicked);
});

});

рони · #5 (**permalink**) 04.03.2018, 13:23

Сообщение от Dan_net

myAddClass

что это? и есть ли в svg класс changeColor?

рони · #6 (**permalink**) 04.03.2018, 13:34

Dan_net,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .changeColor.red{fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:10;}
  .changeColor.blue{fill:none;stroke:#0000FF;stroke-width:5;stroke-miterlimit:10;}
  .changeColor.green{fill:none;stroke:#008000;stroke-width:5;stroke-miterlimit:10;}
  .changeColor {fill:none;stroke:#FFFF00;stroke-width:5;stroke-miterlimit:10;}
  .st1 {fill:none;stroke:#ccccc;stroke-width:5;stroke-miterlimit:10;}
</style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(window).on('load', function () {
var svgobject = document.getElementById('imap');
$('#changeColor input[type=button]').click(function (e) {
var row = $(this).parent();
var className = row.attr("id");
var idClicked = e.target.id;
$("."+className, svgobject).removeClass("red blue green").addClass(idClicked);
});

});

  </script>
</head>

<body>
<div id="changeColor">
<input type="button" id="red" value="Red">
<input type="button" id="blue" value="Blue">
<input type="button" id="green" value="Green">
</div>

<svg id="imap" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 500 500" xml:space="preserve"><metadata><x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c067 79.157747, 2015/03/30-23:40:42        "><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about=""/></rdf:RDF></x:xmpmeta></metadata>

<polyline class="changeColor " points="132 47.5 365 47.5 481.5 249 365.1 450.5 132 450.5 15.7 249 107.9 89.5 338 89.5 429.4 248 338.1 406.5 155 406.5 64.2 248 133.6 127.5 319 127.5 388.2 249 318.5 370.5 179 370.5 109.3 249 160.1 160.5 300 160.5 350.8 249 299.8 337.5 198 337.5 146.8 249 181.5 188.7 282 188.1 "/>
<polyline class="st1 path" points="132 47.5 365 47.5 481.5 249 365.1 450.5 132 450.5 15.7 249 107.9 89.5 338 89.5 429.4 248 338.1 406.5 155 406.5 64.2 248 133.6 127.5 319 127.5 388.2 249 318.5 370.5 179 370.5 109.3 249 160.1 160.5 300 160.5 350.8 249 299.8 337.5 198 337.5 146.8 249 181.5 188.7 282 188.1 "/></svg>

</body>
</html>

Dan_net · #7 (**permalink**) 04.03.2018, 13:35

это по поводу myAddClass

jQuery.fn.myAddClass = function (classTitle) {
    return this.each(function() {
        var oldClass = jQuery(this).attr("class");
        oldClass = oldClass ? oldClass : '';
        jQuery(this).attr("class", (oldClass+" "+classTitle).trim());
    });
};

да, в svg есть класс changeColor

Dan_net · #8 (**permalink**) 04.03.2018, 13:36

Спасибо! А если будет большая палитра цветов?

рони · #9 (**permalink**) 04.03.2018, 13:39

Сообщение от Dan_net

А если будет большая палитра цветов?

и ?

Dan_net · #10 (**permalink**) 04.03.2018, 13:53

$("."+className, svgobject).removeClass("red blue green").addClass(idClicked);

здесь ведь надо будет указывать все необходимые мне цвета (допустим их 20+), может есть проще вариант?

Форум

Справочник

Discord чат

Курсы javascript