SVG.js: Выбор элементов соседа / брата (с помощью селекторов jQuery?) - PullRequest
Новая
       12

SVG.js: Выбор элементов соседа / брата (с помощью селекторов jQuery?)

0 голосов
/ 29 августа 2018

Используя библиотеку SVG.js, я хотел бы манипулировать существующими фигурами внутри элемента.

Это соответствующая разметка этого элемента: 

<div class="container">
    <div class="svg-container">
        <svg id="svg1">

            <rect id="shape1-1" class="sub"/>

            <rect id="shape1-2" class="sub"/>

            <rect id="shape1-3" class="main"/>

        </svg>
    </div>
</div>

Существует несколько таких SVG-элементов, каждый из которых имеет одну форму main и две или более форм sub (идентифицируется как class). Я всегда хочу, чтобы внешний вид подформ (здесь #shape1-1 & #shape1-2) изменился (добавив класс), когда основная фигура (здесь #shape1-3) наведена.

Добавление класса само по себе не проблема, я просто использую element.addClass("my-class");. С чем я борюсь, так это с выбором форм - когда основная фигура наведена, мне нужно , только две подформы внутри одного SVG должны измениться.

Вот почему выбор по class выглядит так: 

function shape_hover() {
  var mainShape = $(".main");

  mainShape.mouseenter(function() {
    var subShapes = SVG.select(".sub");

    subShapes.addClass("my-class");
  });
}

не работает для меня здесь, это изменило бы внешний вид всех подформ.

Конечно, я мог бы сделать это, нацелившись на формы каждого элемента SVG: 

function shape_hover() {
  var mainShape = $(".main");

  mainShape.mouseenter(function() {
    var subShapes = SVG.select("#shape1-1 #shape1-2 #shape1-3");

    subShapes.addClass("my-class");
  });
}

Но это было бы утомительно и неэффективно, мне пришлось бы написать отдельную функцию для каждого SVG-элемента.

С SVG.js, есть ли способ для меня использовать что-то вроде селекторов jQuery, чтобы сделать более конкретный выбор, подходящий для моего случая? Например, .prevAll() или .siblings(). Я попробовал: 

function shape_hover() {
  var mainShape = $(".main");

  mainShape.mouseenter(function() {
    var subShapes = prevAll().select(".sub");

    subShapes.addClass("my-class");
  });
}

и 

function shape_hover() {
  var mainShape = $(".main");

  mainShape.mouseenter(function() {
    var prevAll = $(this).prevAll();
    var subShapes = prevAll.select(".sub");

    subShapes.addClass("my-class");
  });
}

Оба меня ни к чему не привели.

...