Я создаю изображение SVG (карта дерева с эллипсами для узлов), где я хочу соединить эллипсы линиями, но я хочу, чтобы линии начинались с краев эллипсов. Поскольку вычислить, где падают края и начать или закончить линии именно там, очень сложно, я рисую линии из центров эллипсов и ищу способ наложить эллипс на линию, чтобы он маскировал перекрывающаяся часть, создающая впечатление, что линии начинаются только на краю эллипса. Поскольку SVG реализует z-порядок через порядок элементов, если я сначала создам соединительные линии, а затем эллипсы, это сработает, за исключением того, что...
... Я хочу, чтобы эллипсы были синими или красными с fill-opacity="0.15", но когда я это делаю, линии просвечивают. Конечно, имеет смысл, что что-то с низкой непрозрачностью не может полностью замаскировать то, что оно скрывает, но мне трудно понять, как я могу получить желаемый эффект. Я нашел одно рабочее решение: для каждого эллипса, который мне нужен, я сначала создаю эллипс того же размера и положения с белой заливкой и непрозрачностью 1, и это полностью маскирует соединительную линию там, где они перекрываются. Затем я накладываю на белый эллипс тот эллипс, который действительно хочу визуализировать, с синей или красной заливкой и непрозрачностью 0,15. Это выглядит так, как я хочу, но это кажется неуклюжим. Есть ли изящное решение, которое я пропускаю?
