Почему <маркер> не ориентируется как <path>

Я пытаюсь создать изогнутую стрелку с SVG. Я использую d3.line () для создания пути.

 let points = [
    [400,100],
    [450,200],
    [350,200],
    [385,275]
] 
let path = d3.line().curve(d3.curveCardinal)(points)

console.log(path)
// -> M400,100C400,100,458.3333333333333,183.33333333333334,450,200C441.6666666666667,216.66666666666666,360.8333333333333,187.5,350,200C339.1666666666667,212.5,385,275,385,275

Но когда я пытаюсь использовать этот результат в svg:

 <svg width="1200" height="1200" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>
        </defs>
        <path d="M400,100C400,100,458.3333333333333,183.33333333333334,450,200C441.6666666666667,216.66666666666666,360.8333333333333,187.5,350,200C339.1666666666667,212.5,385,275,385,275"
            stroke-width="2" stroke="lightblue" fill="none" style="marker-end: url(#Triangle);"></path>
    </svg>

А вот и результат SVG

.

Я не могу понять, почему маркер не ориентируется. Есть ли лучшая библиотека для генерации пути для решения этой проблемы?

4 голоса | спросил ivanross 25 PMpWed, 25 Apr 2018 13:35:25 +030035Wednesday 2018, 13:35:25

3 ответа


0
Это ожидаемое поведение.Проблема в том, что в кардинальном сплайне ...На каждом конце кривой требуются две дополнительные точки.И эти точки, кажется, мешают ориентации маркера (что действительно так, см . Ответ ЛеБо ).Вы можете легко увидеть это, если вы измените кривую.Например, используя ---- +: = 0 =: + ---- :В вашем случае решение (возможно, взлом) может заключаться в добавлении к пути последней строки, находящейся всего в 1px от конечной точки:Вот демо:
ответил Gerardo Furtado 25 PMpWed, 25 Apr 2018 14:14:58 +030014Wednesday 2018, 14:14:58
0
Это потому, что последняя контрольная точка и конечная точка вашего пути имеют одинаковые координаты: (385,275).SVG использует вектор контрольной точки, чтобы определить направление кривой в этой точке.Если ваш вектор контрольной точки от (385,275) до (385,275), то он не может определить угол.Таким образом, по умолчанию угол составляет 0 градусов.
ответил Paul LeBeau 25 PMpWed, 25 Apr 2018 14:14:38 +030014Wednesday 2018, 14:14:38
0
Во-первых, атрибуты ref вроде бы правильные, но я думаю, что может быть лучше, сделайте refX 0, поскольку вы используете полный viewBox.Я думаю, что ориентация маркера правильная и обновленная.Но в зависимости от окончания пути интерполяция ориентации может выглядеть неправильно.Таким образом, вы можете проверить это поведение, обрезав свою траекторию из последней кривой C ... и увидите, что ориентация правильная.Далее я проверил его, чтобы убедиться, что он правильный, по крайней мере для отрезков, вот скрипка, и я даже не использовал d3:https://jsfiddle.net/ibowankenobi/L8x19rco/2/
ответил ibrahim tanyalcin 25 PMpWed, 25 Apr 2018 14:15:42 +030015Wednesday 2018, 14:15:42

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132