svg miterlimit на две отдельные линии

14 июня 2021, 16:00

Есть 2 линии с 4-мя точками: одна линия = 2 точки Необходимо применить один miterlimit stroke-miterlimit-svg сразу к 2-ум линиям так, как он применяется по умолчанию к одной.. Как написать правильно такой алгоритм на JavaScript для построения таких конечных точек? Помогите, пожалуйста..

jsfiddle

(function(win, doc) { 
  var svg = doc.getElementById('svg'); 
  var path1Element = doc.getElementById('p1'); 
  var path2Element = doc.getElementById('p2'); 
  var point1; 
  var point2; 
  var path1; 
  var path2; 
   
  point1 = [{x:5, y:10}, {x:15, y:5}]; 
  point2 = [{x:15, y:5}, {x:25, y:10}]; 
  path1 = 'M' + point1[0].x + ',' + point1[0].y + 'L' + point1[1].x + ',' + point1[1].y; 
  path2 = 'M' + point2[0].x + ',' + point2[0].y + 'L' + point2[1].x + ',' + point2[1].y; 
   
  path1Element.setAttributeNS(null, 'd', path1); 
  path2Element.setAttributeNS(null, 'd', path2); 
})(window, document);

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg" id="svg"> 
<path stroke="black" fill="none" stroke-linejoin="miter" id="p1" 
        d="M0, 0 L0, 0" /> 
<path stroke="black" fill="none" stroke-linejoin="miter" id="p2" 
        d="M0, 0 L0, 0" /> 
</svg>

Answer 1

stroke-miterlimit изменяет скосы для path: пример

В вашем случае либо делать через 1 path для двух линий, либо костылить, смещая линии на 0,5: пример