1

¿Como hacer lineas SVG con obstaculos?

Actualmente estoy utilizando la libreria LeaderLine para realizar este mapa curricular mapacurricular.png

Sin embargo, no encuentro la manera en que las lineas puedan detectar un obsctaculo para que lo evite y no pinte la linea sobre el. mapacurricular_css.png

<!doctype html><scriptsrc="https://code.jquery.com/jquery-latest.min.js"></script><scriptsrc="../jquery.connections.js"></script><linkrel="stylesheet"href="./index.css"><tableclass="basic first"><tr><tdid="1"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Calculo Diferencia e Integral I
        </div></div></td><tdclass=""id="2"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Geometría Analitica
        </div></div></td><tdclass=""id="3"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Álgebra Superior I
        </div></div></td><tdclass=""id="4"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Estrategias para Aprender a Aprender
        </div></div></td><tdclass=""id="5"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Nuevas Tecnologías de la información y la comunicación
        </div></div></td><tdclass=""id="6"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>0</span><span>6</span></div><divclass="nombre-materia">
          Introducción a las ciencias de la computación
        </div></div></td><tdclass=""id="7"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>2</span><span>2</span></div><divclass="nombre-materia">
          Diseño de Algoritmos
        </div></div></td></tr><tr><tdclass=""id="8"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Calculo Diferencia e Integral II
        </div></div></td><tdclass=""id="9"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Álgebra Lineal I
        </div></div></td><tdclass=""id="10"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>2</span><span>10</span></div><divclass="nombre-materia">
          Mecánica I / Lab.
        </div></div></td><tdclass=""id="11"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Matemáticas Discretas
        </div></div></td><tdclass=""id="12"><divclass="materia"><divclass="header-materia"><span>2</span><span>2</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Programación de Computadoras
        </div></div></td><tdclass=""id="13"><divclass="materia"><divclass="header-materia"><span>4</span><span>0</span><span>0</span><span>8</span></div><divclass="nombre-materia">
          Historia de la Ciencia y la Tecnología
        </div></div></td><tdclass=""id="14"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Características de la Sociedad Actual
        </div></div></td></tr><tr><tdclass=""id="15"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Calculo Diferencia e Integral III
        </div></div></td><tdclass=""id="16"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Ecuaciones Diferenciales I
        </div></div></td><tdclass=""id="17"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>2</span><span>10</span></div><divclass="nombre-materia">
          Fluidos y Fenómenos Térmicos / Lab
        </div></div></td><tdclass=""id="18"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Programación Avanzada
        </div></div></td><tdclass=""id="19"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>0</span><span>8</span></div><divclass="nombre-materia">
          Análisis Númerico I
        </div></div></td><tdclass=""id="20"><divclass="materia"><divclass="header-materia"><span>4</span><span>0</span><span>1</span><span>9</span></div><divclass="nombre-materia">
          Expresión Oral y Escrita
        </div></div></td><tdclass=""id="21"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>0</span><span>0</span></div><divclass="nombre-materia">
          Ingléx
        </div></div></td></tr><tr><tdclass=""id="22"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Probabilidad
        </div></div></td><tdclass=""id="23"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          C.S. Hum. Econ
        </div></div></td><tdclass=""id="24"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>2</span><span>10</span></div><divclass="nombre-materia">
          Electromagnetismo / Lab
        </div></div></td><tdclass=""id="25"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Estructura de Datos
        </div></div></td><tdclass=""id="26"><divclass="materia"><divclass="header-materia"><span>2</span><span>2</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Ingeniería de Software I
        </div></div></td><tdclass=""id="27"><divclass="materia"><divclass="header-materia"><span>4</span><span>0</span><span>0</span><span>8</span></div><divclass="nombre-materia">
          Teoría de la Computación
        </div></div></td><tdclass=""id="28"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Ética y Deasrollo Profesional
        </div></div></td><tdclass=""id="29"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Inglés
        </div></div></td></tr><tr><tdclass=""id="30"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Estadística
        </div></div></td><tdclass=""id="31"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Análisis Lógico
        </div></div></td><tdclass=""id="32"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>2</span><span>10</span></div><divclass="nombre-materia">
          Diseño de Sistemas Digitales
        </div></div></td><tdclass=""id="33"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Lenguajes de Programación
        </div></div></td><tdclass=""id="34"><divclass="materia"><divclass="header-materia"><span>2</span><span>2</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Ingeniería de Software II
        </div></div></td><tdclass=""id="35"><divclass="materia"><divclass="header-materia"><span>4</span><span>0</span><span>0</span><span>8</span></div><divclass="nombre-materia">
          C.S. Hum. Econ
        </div></div></td><tdclass=""id="36"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Inglés
        </div></div></td></tr><tr><tdclass=""id="37"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Especializante
        </div></div></td><tdclass=""id="39"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Inteligencia Artificial
         </div></div></td><tdclass=""id="40"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>2</span><span>10</span></div><divclass="nombre-materia">
         Arquitectura de Computadoras
        </div></div></td><tdclass=""id="41"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Análisis de Algoritmos I
        </div></div></td><tdclass=""id="42"><divclass="materia"><divclass="header-materia"><span>2</span><span>2</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Bases de Datos I
        </div></div></td><tdclass=""id="43"><divclass="materia"><divclass="header-materia"><span>4</span><span>0</span><span>0</span><span>8</span></div><divclass="nombre-materia">
          Eje Integrador
        </div></div></td><tdclass=""id="44"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Inglés
        </div></div></td></tr><tr><tdclass=""id="45"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Estadística
        </div></div></td><tdclass=""id="46"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Especializante
        </div></div></td><tdclass=""id="47"><divclass="materia"><divclass="header-materia"><span>3</span><span>2</span><span>2</span><span>10</span></div><divclass="nombre-materia">
          Especializante
        </div></div></td><tdclass=""id="48"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Sistemas Operativos
        </div></div></td><tdclass=""id="49"><divclass="materia"><divclass="header-materia"><span>2</span><span>2</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Redes de Computadoras I
        </div></div></td><tdclass=""id="50"><divclass="materia"><divclass="header-materia"><span>4</span><span>0</span><span>0</span><span>8</span></div><divclass="nombre-materia">
          Análisis de Diseño Orientado a Objetos
        </div></div></td><tdclass=""id="51"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Inglés
        </div></div></td></tr><tr><tdclass=""id="52"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Especializante
        </div></div></td><tdclass=""id="53"><divclass="materia"><divclass="header-materia"><span>3</span><span>0</span><span>2</span><span>8</span></div><divclass="nombre-materia">
          Especializante
        </div></div></td><tdclass=""id="54"><divclass="materia"><divclass="header-materia"><span>0</span><span>0</span><span>3</span><span>3</span></div><divclass="nombre-materia">
          Eje Integrador
        </div></div></td></tr></table><scriptsrc="leader-line.min.js"></script><script>//Lineas del primer semestrenew LeaderLine(document.getElementById('1'),document.getElementById('8'), {size:3, path:'fluid',  dash: {len: 4, gap: 24}
})
  new LeaderLine(document.getElementById('1'),document.getElementById('9'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('1'),document.getElementById('9'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('2'),document.getElementById('9'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('3'),document.getElementById('11'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('3'),document.getElementById('12'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('7'),document.getElementById('12'), {size:3, path:'fluid'})

  //Lineas del segundo semestrenew LeaderLine(document.getElementById('8'),document.getElementById('15'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('8'),document.getElementById('16'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('8'),document.getElementById('17'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('8'),document.getElementById('18'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('8'),document.getElementById('19'), {size:3, path:'fluid'})
  new LeaderLine(document.getElementById('8'),document.getElementById('22'), {size:3, path:'fluid'})

  new LeaderLine(document.getElementById('9'),document.getElementById('16'), {size:3, path:'fluid'})

  new LeaderLine(document.getElementById('10'),document.getElementById('17'), {size:3, path:'fluid'})

  new LeaderLine(document.getElementById('11'),document.getElementById('27'), {size:3, path:'fluid'})



</script></body></html>
Escribe tu comentario
+ 2