Управление множественными заливками и мазками SVG с помощью функции - PullRequest
Новая
       4

Управление множественными заливками и мазками SVG с помощью функции

1 голос
/ 27 апреля 2020

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

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

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

Я пробовал несколько разных способов настроить формулу, но я застрял. 

var colorSet = {
  '#ff0000': '#ff6666',
  '#008250': '#42a680',
  '#a3238f': '#bd73b2',
  '#0079c2': '#42a0db',
  '#ff8c00': '#ffba66',
  '#96c800': '#cae087',
  '#a86000': '#c28f4e',
  '#999999': '#cccccc',
  '#ffe000': '#fff399'
}
var animateThis = function(obj) {
  var getStroke = obj.getAttribute('stroke');
  TweenLite.to(obj, 1.5, {
    fill: "#bbbbbb",
    yoyo: true,
    repeat: -1
  });
};

Вот моя скрипка : https://jsfiddle.net/Spiderian/hzafm6vk/3/# & Togetherjs = 6e0qwPovaP

1 Ответ

1 голос
/ 02 мая 2020
  1. Для цветных линий необходимо использовать stroke, а не fill. И на <line> не на <g>.
  2. getStroke не используется в вашем коде. (И, кстати, getAttribute на $ нет. attr())
  3. colorSet также не используется, и я не совсем понимаю, для чего это нужно. Поскольку все линии и точки в jsfiddle , которые вы предоставили, имеют одинаковый цвет.
  4. Не совсем понятно, почему для каждой <g>.

Но, тем не менее, вот что вам нужно сделать: 

// change all line selectors from this
// const lsSIT0001 = $("#SIT0001");
// const lsSIT0002 = $("#SIT0002");
// ...
// to this
const lsSIT0001 = $("#SIT0001 line");
const lsSIT0002 = $("#SIT0002 line");
// ...
// because you need to change stroke color of `<line>`s, not `<g>`s

// split
// var itemsToAnimate = [ lsSIT0020, ..., lsSIT0001, SIR4947, ..., SIR4629 ]
// into
const linesToAnimate  = [ lsSIT0020, ..., lsSIT0001 ]
const pointsToAnimate = [ SIR4947  , ..., SIR4629   ]

// run separate animations for lines and dots
const animatePoints = obj => TweenLite.to(obj, 1.5, { fill  : "#ff0000", yoyo: true, repeat: -1 })
const animateLines  = obj => TweenLite.to(obj, 1.5, { stroke: "#0000ff", yoyo: true, repeat: -1 })
linesToAnimate .forEach(animateLines )
pointsToAnimate.forEach(animatePoints)

Обновление: Для использования colorSet вам необходимо либо

  • установите style='stroke: some_color' на каждом <line> и затем используйте его следующим образом: 
    const style = obj.eq(i).attr('style')
// `i` is the index of a line inside <g> the color of which you want to get
TweenLite.to(obj, 1.5, { stroke: colorSet[style], ... })
    В этом случае colorSet должно выглядеть как 
    const colorSet = {
  "stroke: #ff0000": '#ff6666',
  ...
  "stroke: #ffe000": '#fff399',
}
  • или получить вычисленные стили с помощью obj.get(i).computedStyleMap().get("stroke").toString() В этом случае colorSet должно выглядеть как 
    const colorSet = {
  "rgb(255, 0, 0)": '#ff6666',
  ...
  "rgb(255, 224, 0)": '#fff399',
}
    Но это Экспериментальная технология . Так что, вероятно, не стоит:)
  • Или еще лучше - создайте карту не из цвета в цвет, а из идентификатора в цвет: 
    const colorSet = {
  "#SIT0001": '#ff6666',
  ...
  "#SIT0020": '#fff399',
}
    Тогда вам не нужно будет получать цвета из DOM.
...