Как нарисовать стрелку в конце кривой Безье в SVG / Raphael? - PullRequest
Новая
       3

Как нарисовать стрелку в конце кривой Безье в SVG / Raphael?

2 голосов
/ 23 сентября 2011

У меня есть кривая, сгенерированная следующим образом: 

    var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", arrow_left_x, arrow_left_y, "L", arrow_right_x, arrow_right_y, "L", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

enter image description here

, но моя стрелка выполнена неправильно.
- она ​​указывает только вправо и неНе указывайте то же направление, что и наклон кривой в конце Безье.- это не заполнено

сейчас, я знаю, что здесь не правильно делаю математику, но в основном я просто хочу знать, как заполнить треугольник в конце строки.спасибо!

Для демонстрационных целей: 

        arrow_left_x = (x1 - 8);
        arrow_left_y = (y1 - 8);
        arrow_right_x = (x1 - 8);
        arrow_right_y = (y1 + 8);

- это код для получения координат, которые я использую.

1 Ответ

18 голосов
/ 24 сентября 2011

Полагаю, вы должны использовать маркеры для своих целей.См. пример здесь .

Редактировать:

Вам необходимо создать маркер в разделе defs: 

var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker.setAttribute('id', 'Triangle');
marker.setAttribute('viewBox', '0 0 16 16');
marker.setAttribute('refX', '0');
marker.setAttribute('refY', '6');
marker.setAttribute('markerUnits', 'strokeWidth');
marker.setAttribute('markerWidth', '16');
marker.setAttribute('markerHeight', '12');
marker.setAttribute('orient', 'auto');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
marker.appendChild(path); 
path.setAttribute('d', 'M 0 0 L 16 8 L 0 16 z');   
path.setAttribute('stroke', '#000');   
path.setAttribute('stroke-width', '1'); 
path.setAttribute('style', '  marker-start :none;   marker-end :none; ');      

document.getElementById( id_of_svg_placeholder ).getElementsByTagName('svg')[0].appendChild(defs);
defs.appendChild(marker);

и ссылки на него в CSS: 

path {marker-start:url("#Triangle")}

или в качестве атрибута: 

<path d="..." marker-start="url(#Triangle)" />

Вот результирующий jsfiddle

...